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

Question

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

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

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

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

редактирует:

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

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

• clean-css # 152: перебазирование функциональности очень расстраивает
• clean-css # 195: root опция в Windows
• clean-css # 263: как получить относительную опцию для работы с CSS-файлами по разным путям
• http://adilapapaya.com/docs/clean-css/
• Грунт 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)"

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

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

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

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

Answer 1

Я лично использую 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

В частности:

• rebase - установите в false, чтобы пропустить перебазирование URL
• relativeTo - путь для разрешения относительных правил @import и URL-адресов
• restructuring - установите в false, чтобы отключить реструктуризацию в расширенной оптимизации
• root - путь для разрешения абсолютных правил @import и перебазирования относительных URL