Как настроить 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%;
Но вот как сделать, чтобы при сборке, автоматически правильно прописывался путь, а не оставался как есть. Я конечно смотрел готовые стартовые шаблоны разных разработчиков, где есть разные вложенности файлов, но никак не могу понять какой плагин это делает. Кто может помочь?
  • Вопрос задан
  • 320 просмотров
Решения вопроса 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
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы