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

Question

[Евгений Попов]

Есть небольшой стартовый шаблон на 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%;

Но вот как сделать, чтобы при сборке, автоматически правильно прописывался путь, а не оставался как есть. Я конечно смотрел готовые стартовые шаблоны разных разработчиков, где есть разные вложенности файлов, но никак не могу понять какой плагин это делает. Кто может помочь?

Comments

[GUROV DMITRIY]

Всегда читайте опции плагинов. у лесс есть опция relative url котогрую нужно поставить в true

Answer 1

[Станислав]

Вообще, тут нужно понимать, что все подобные задачи в 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-файлы таким образом, чтобы потом не приходилось их редактировать. Но это, конечно, дело вкуса, да и так не слишком удобно разрабатывать код, конечно.

Comments

[Евгений Попов]

спасибо за помощь, но вот не могу понять как его к себе пристроить. Попробую еще раз объеснить подробнее. В моем проекте, я работаю в папке, где есть вложеность, less лежат в папках. У них я путь прописываю :

background: url(../../img/angle_up.png) no-repeat 97% 50%;

То есть правильный путь относительно less файла. Но вот когда сборка происходит, удаляются все разные папки и объединяется в один файл. И вот уже в этом файле мне нужно чтобы путь был

background: url(../img/angle_up.png) no-repeat 97% 50%;

Находил на форуме, что нужно сразу прописывать правильные пути, но никак не пойму, как я буду проверять верстку до сборки, так как пути же не правильные. Никак не врублюсь. Ссылка на мой проект https://github.com/12evgen/one-page

[Станислав]

12evgen: Есть два варианта разработки проекта с использованием локальной среды - это с поднятием локального сервера на вашей машине и без этого.

В случае, если вы не хотите поднимать локальный сервер, вы действительно можете делать, как хотите делать сейчас - сначала указывать правильные пути в LESS-файлах, проверять, и перед выдачей проекта в продакшн обрабатывать эти файлы с помощью указанного мной плагина, чтобы после превращения в CSS-файлы (или файл, не суть) пути они содержал все равно верные.

В случае, если вы хотите все-таки поднять свой собственный сервер и видеть все сразу как будто на продакшене, только в своей тестовой среде, вы можете поднять как собственно сам сервер, так и npm на нем, а вместе с ним и LESS-препроцессор, и Gulp, и что угодно еще. В этом случае вам необязательно в LESS-файлах указывать верные пути, ведь как только вы внесете в них очередное изменение, LESS-препроцессор может обработать их вместе с Gulp, после чего вам останется только зайти в браузере по пути вроде my.app и проверить результат вашей работы.

В вашем проекте я вижу, что вы просто скопировали пример использования плагина, а не модифицировали его под себя. Вы уверены, что понимаете, как работает Gulp? Так или иначе, ключевое место в скопированном вами коде следующее:

modify: function (url, filePath) {
        return 'app/less' + url;
      },

Здесь вы можете вместо выражения "'app/less' + url" использовать любое другое для модификации путей, например удалить подстроку "../../img/" из url и заменить ее на "../img/", стандартными средствами JavaScript.

[Евгений Попов]

Спасибо еще раз!
На счет двух решений разработки проекта я в курсе, и иду по второму пути, поэтому и изучаю возможности Gulp. И да, я пока не сильно понял как он работает, но благодаря вам уже получше ориентируюсь. Честно скажу не понял как этот плагин может менять путь на тот который нужен, поэтому взял плагин gulp-css-url-adjuster, там на примере мне стало более ясно. Спасибо за помощь!

[Станислав]

12evgen: так или иначе рад, что помог :) Если же все-таки закончить про тот плагин, который я привел в своем ответе - там в целом три вещи, которые можно настроить:

1. Что вернет return
   
2. Что добавить в конец адреса (append)
   
3. Что добавить в начало адреса (prepend)
   

Две последние вам в целом не нужны, а вот в return можно указывать вместо написанного в примере какое-либо выражение с replace(), например return url.replace(''../../img/, '../img/'). Но это уже скорее лирика и отступление для тех, кто возможно потом этот вопрос читать будет.

[Евгений Попов]

Станислав: я так и сделал с replace(), в плагине который писал выше, я почему то подумал что плагине который вы подсказали, по другому делается) ну это уже не важно