Объединить / переместить CSS-файлы с помощью Gulp
Я ищу цепочку плагинов для использования с Gulp, которая обеспечивает:
- карта
- меньше
- минификации
- объединение
- замена URL (rebase) для адреса перемещения/concat
в настоящее время у меня есть первые четыре, но я не могу найти комбинацию существующих плагинов, которые дадут мне последний (url rebasing). Я не нашел никаких плагинов для перебазирования URL, которые испускают sourcemaps.
чтобы быть ясным, моя проблема заключается в том, что когда я компилирую несколько небольших файлов CSS из моих папок разработки проектов и выводю их в общую папку, перемещение в результате конкатенации нарушает относительные URL-адреса, такие как для фоновых изображений.
изменения:
похоже, что цепочка инструментов, которую я сейчас использую, уже предназначена для решения этой проблемы. Итак, это якобы ответ. Однако возникает другой вопрос., как должен работать требуемый синтаксис.
этот вопрос теоретически имеет много дубликатов:
- clean-css #152: функциональность перебазирования очень расстраивает
- clean-css #195:
root
опция в Windows - clean-css #263: как получить опцию relativeTo, работающую с CSS-файлами в разных пути
- http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
- Grunt cssmin перебазирует относительный URI?
к сожалению, никакие ответы на самом деле не объясняют синтаксис, они просто демонстрируют вуду; поэтому я не знаю, почему следующее не работает. Если я смогу это решить, я вернусь сюда и отмечу это принято, чтобы указать, что эта цепочка инструментов действительно делает то, что мне нужно.
в исходные файлы:
/assets
/site
styleInput1.less "url(../site/logo.png)"
logo.png
background.png
/application
styleInput2.less "url(../site/background.png)"
задача глоток:
gulp.task(filename, function () {
return gulp.src(files)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(minifyCss({ relativeTo: './compiled' }))
.pipe(concat(filename))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./compiled'));
});
вывод, со сломанными URL-адресами. Обратите внимание на множественные дефекты. Хотя CSS поднят на уровень каталога относительно необходимых активов, добавлен дополнительный родительский каталог (!). Кроме того, у одного из URL-адресов было изменено имя папки жестких активов (!). Очень странно:
/compiled
styleOutput1.css "url(../../compiled/logo.png)"
styleOutput2.css "url(../../site/background.png)"
мои извинения за продолжение вуду, но вот мой рабочая залпом труба!--26-->:
.pipe(minifyCss({ relativeTo: './compiled', target: './compiled' }))
и правильный выход:
/compiled
styleOutput1.css "url(../assets/site/logo.png)"
styleOutput2.css "url(../assets/site/background.png)"