Concatenate/передислоцировать CSS файлы с Глотком

Question

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

• источника карта поддержки
• менее
• минификация
• конкатенация
• URL замена (перебазировка) на адрес передислокации/concat

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

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

правок:

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

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

• clean-css #152: Rebasing functionality very frustrating
• clean-css #195: root option on Windows
• clean-css #263: How to get relativeTo option working with CSS files in different paths
• http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
• Grunt cssmin rebasing a relative 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

Я лично использую глотка -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 - установите на ложь, чтобы пропустить URL перебазирования
• relativeTo - путь для решения относительных @import правил и ссылок
• restructuring - set t о ложной, чтобы отключить реструктуризации в развитых оптимизаций
• root - путь для решения абсолютных правил @import и перебазироваться относительные адреса