Как настроить Gulp, чтобы корректно прописывал пути файлов?

Есть небольшой стартовый шаблон на Gulp, где я компилирую less файлы в один css-ный файл. Пример gulp таска :
gulp.task('less', function () {  
    return gulp.src('app/less/**/*.less')
    	.pipe(less().on("error", notify.onError()))
        .pipe(less({
            paths: [ path.join(__dirname, 'less', 'includes') ]
        }))
       	.pipe(concat('main.min.css'))
        .pipe(cleanCSS())
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({stream: true}));
});

Вроде все работает, но не могу разобраться с путями расположениями файлов. Например less у меня разбиты на блоки, которые вложены в папки. Там путь допустим к фону написан
background: url(../../img/angle_up.png) no-repeat 97% 50%;
Но вот как сделать, чтобы при сборке, автоматически правильно прописывался путь, а не оставался как есть. Я конечно смотрел готовые стартовые шаблоны разных разработчиков, где есть разные вложенности файлов, но никак не могу понять какой плагин это делает. Кто может помочь?
  • Вопрос задан
  • 526 просмотров
Решения вопроса 1
stanislav-belichenko
@stanislav-belichenko
Full-stack Web Developer
Вообще, тут нужно понимать, что все подобные задачи в 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-файлы таким образом, чтобы потом не приходилось их редактировать. Но это, конечно, дело вкуса, да и так не слишком удобно разрабатывать код, конечно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
17 дек. 2018, в 22:08
5000 руб./за проект
17 дек. 2018, в 21:19
1 руб./за проект