Как настроить 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%;
Но вот как сделать, чтобы при сборке, автоматически правильно прописывался путь, а не оставался как есть. Я конечно смотрел готовые стартовые шаблоны разных разработчиков, где есть разные вложенности файлов, но никак не могу понять какой плагин это делает. Кто может помочь?
  • Вопрос задан
  • 458 просмотров
Решения вопроса 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
Похожие вопросы
Sibdev Ульяновск
от 40 000 до 60 000 руб.
Sibdev Красноярск
от 40 000 до 60 000 руб.
23 сент. 2018, в 18:12
1000 руб./за проект
23 сент. 2018, в 16:20
20000 руб./за проект
23 сент. 2018, в 15:36
1000 руб./в час