Вообще, тут нужно понимать, что все подобные задачи в Gulp решаются как правило за счет тех или иных плагинов для него. Так, конкретно для вашей задачи подойдет плагин gulp-modify-css-urls. Сначала вам необходимо установить его:
npm install --save-dev gulp-modify-css-urls
Параметр --save-dev укажите, если хотите, чтобы эта зависимость прописалась в ваш package.json в раздел dev. После этого вы можете модифицировать пути в файлах css с помощью примерно такого кода (взят из доков этого плагина):
var gulp = require('gulp')
, modifyCssUrls = require('gulp-modify-css-urls');
/* style.css
body {
background-image: url('images/logo.png');
}
*/
gulp.task('modifyUrls', function () {
return gulp.src('style.css')
.pipe(modifyCssUrls({
modify: function (url, filePath) {
return 'app/' + url;
},
prepend: 'https://fancycdn.com/',
append: '?cache-buster'
}))
.pipe(gulp.dest('./'));
});
/* style.css
body {
background-image: url('https://fancycdn.com/app/images/logo.png?cache-buster');
}
*/
В коде вроде бы все понятно прокомментировано, но если что, спрашивайте уточнение. В целом же, есть вариант и сразу писать LESS-файлы таким образом, чтобы потом не приходилось их редактировать. Но это, конечно, дело вкуса, да и так не слишком удобно разрабатывать код, конечно.
Средний
