Объединить / переместить CSS-файлы с помощью Gulp

Я ищу цепочку плагинов для использования с Gulp, которая обеспечивает:

  • карта
  • меньше
  • минификации
  • объединение
  • замена URL (rebase) для адреса перемещения/concat

в настоящее время у меня есть первые четыре, но я не могу найти комбинацию существующих плагинов, которые дадут мне последний (url rebasing). Я не нашел никаких плагинов для перебазирования URL, которые испускают sourcemaps.

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

изменения:

похоже, что цепочка инструментов, которую я сейчас использую, уже предназначена для решения этой проблемы. Итак, это якобы ответ. Однако возникает другой вопрос., как должен работать требуемый синтаксис.

этот вопрос теоретически имеет много дубликатов:

к сожалению, никакие ответы на самом деле не объясняют синтаксис, они просто демонстрируют вуду; поэтому я не знаю, почему следующее не работает. Если я смогу это решить, я вернусь сюда и отмечу это принято, чтобы указать, что эта цепочка инструментов действительно делает то, что мне нужно.

в исходные файлы:

/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)"

1 ответов


Я лично использую gulp-minify-css и указываю