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

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

  • поддержка исходной карты
  • меньше
  • минификация
  • конкатенация
  • Замена URL-адреса (перебазирование) для решения проблемы перемещения/конкатирования

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

Просто чтобы прояснить, моя проблема заключается в том, что когда я компилирую несколько небольших файлов 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)"

Приношу свои извинения за продолжение колдовства, но вот моя рабочая глотка:

.pipe(minifyCss({ relativeTo: './compiled', target: './compiled' }))

И правильный вывод:

/compiled
    styleOutput1.css "url(../assets/site/logo.png)"
    styleOutput2.css "url(../assets/site/background.png)"

css clean-css gulp gulp-sourcemaps
person shannon    schedule 19.05.2015    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Лично я использую gulp-minify-css и указываю атрибут relativeTo.

gulp.task('css', function() {
    gulp.src('./assets/css/main.css')
// Here I specify the relative path to my files
      .pipe(minifyCSS({keepSpecialComments: 0, relativeTo: './assets/css/', processImport: true}))
      .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
      }))
      .pipe(gulp.dest('./assets/css/dist/'))
      .pipe(notify({
          "title": "Should I Go?",
          "subtitle": "Gulp Process",
          "message": '<%= file.relative %> was successfully minified!',
          "sound": "Pop",
          "onLast": true
      }));
  });

Если это не работает для вас, у них есть много других параметров для перебазирования URL-адресов: https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-programmatically

В частности:

  • rebase — установите значение false, чтобы пропустить изменение URL-адреса
  • relativeTo - путь для разрешения относительных правил @import и URL-адресов
  • restructuring — установите значение false, чтобы отключить реструктуризацию в расширенных оптимизациях.
  • root — путь для разрешения абсолютных правил @import и перебазирования относительных URL-адресов
person Romain Braun    schedule 19.05.2015
comment
Отлично, я уже использую gulp-minify-css! Я не знал, что у него есть такая функция, но я сейчас попробую. - person shannon; 20.05.2015
comment
Забавно, теперь я вижу, что его ядром является clean-css, и по этой причине я искал плагин, основанный на этом инструменте. - person shannon; 20.05.2015
comment
тьфу, ни одна из этих команд конфигурации отношения пути gulp никогда не объясняется ясно. relativeTo не делает то, что я ожидаю, и я также не понимаю из документации, чем он отличается от root и target. - person shannon; 20.05.2015
comment
Да, но я понятия не имею, почему это работает. Мне пришлось использовать 2 параметра. Насколько я могу судить, в большинстве случаев выходная папка должна быть указана для параметров relativeTo, target и root. В документации ясно, что target предназначен для относительных URL-адресов, root — для абсолютных URL-адресов, а relativeTo каким-то образом взаимодействует с обоими первыми. Но не объясняет как. Смотрите мои OP изменения для получения информации о моем исправлении. - person shannon; 20.05.2015
comment
после некоторой головной боли и некоторой возни я думаю, что relativeTo - это путь к вашему исходному файлу css, а target - предполагаемый путь к вашему очищенному файлу css. Как и @shannon, мне нужно использовать и relativeTo, и target. Я не играл с root, но я думаю, что это должен быть исходный корень URL-адресов до обработки clean-css. - person lastoneisbearfood; 22.06.2015
comment
Спасибо, @RomainBraun часами пытался понять, что происходит с моими URL-адресами, которые rebase: false работали отлично. - person Thomas Taylor; 29.11.2015