Как с помощью gulp подключать плагины (например, bxslider) и их картинки в собранном css-файле?

Question

[almac]

Пример:
1. есть структура типа этой - joxi.ru/xAeGJ3WtPgkLmy
2. в папке plugins есть плагины наподобие bxslider - joxi.ru/Vm6yvw1UzjaLrZ
3. проект автоматически собирается, и в итоге получается один css-файл - "vendors.min.css". Внутри него есть ссылка на картинки bxslider'a: "background-url: (images/controls.png)";
4. у каждого такого плагина есть ссылка на свои картинки
Вопрос: как при сборке проекта подключить картинки (именно для плагинов), когда все они разбросаны по своим папкам и пути в css совершенно разные?

Answer 1

[Artem Malko]

Несколько вариантов:

1. указывать сразу верный путь;
   
2. использовать плагины для замены пути (gulp-replace-path, gulp-assetpaths и т.д.);
   
3. писать вместо пути какой-нить плейсходер типа =%staticPath%= и потом менять этот плейсхолдер с помощью gulp-replace на то, что нужно.
   

А вообще, я порекомендую изучить, как это реализовано в TARS, как раз решается именно ваша задача.
О том, как это все работает можно узнать из доклада (https://vimeo.com/123924728 20 минута) или из доков к TARS. Там все очень подробно описано + статьи на хабре.

Answer 2

[almac]

1. Копирую gulp'ом картинки из папки plugins
2. При помощи gulp-replace-path и регулярного выражения заменяю пути в собранном css-файле.

Честно говоря, так запарился с регулярками, что думал уже не получится.. Вот код:

gulp.task('test', function () {
	return gulp.src('../build/css/vendors*.css')
				.pipe(replace(/url\s*\(\s*[\'|\"]*\s*.*?([^\/]+?\.(?:png|jpg|jpeg|gif))\s*[\'|\"]*\s*\)/gi, 'url\(../images/vendors/$1\)'))
				.pipe(gulp.dest('../build/css/'));
});