глоток задачи: CleanCSS и Дорожка

Question

Я создал задачу с Глотком, который должен:

1. Регистрации нескольких файлов CSS;
2. Minify + удалить ненужные CSS;
3. Исправление путей для директив url() и других;
4. Создание исходных карт;

Мой текущий код для этого:

var gulp = require("gulp"), 
    concat  = require("gulp-concat"), 
    cleanCSS = require("gulp-clean-css"), 
    sourcemaps = require("gulp-sourcemaps"); 

var styleList = [ 
    "Resources/Include/ionicons/css/ionicons.css", 
    "Resources/base.css", 
    "Resources/extra.css", 
]; 

gulp.task("deploy-css", function() { 
    gulp.src(styleList) 
    .pipe(sourcemaps.init()) 
    .pipe(concat("style.min.css")) 
    .pipe(cleanCSS({ 
      debug: true, 
      compatibility: "ie8", 
      keepSpecialComments : 0, 
      target: "Resources/", 
      relativeTo: "Resources/" 
     }) 
    ) 
    .pipe(sourcemaps.write()) 
    .pipe(gulp.dest("Resources/")) 
}); 

url() пример пути, взятый из файла Resources/Include/ionicons/css/ionicons.css:

@font-face { font-family: "Ionicons"; src: url("../fonts/ionicons.eot?v=2.0.0"); 

Это моя текущая структура файла:

./Resources/style.min.css // -> Final processed file 
./Resources/base.css 
./Resources/extras.css 
./Resources/Include/ // -> Original CSS files with URL (installed via Bower) 

Тестовая папка: https://dl.dropboxusercontent.com/u/2333896/gulp-path-test.zip (установить, а затем запустить с gulp deploy-css).

Почти все работает должным образом, за исключением случаев, когда файлы CSS содержат ссылки на изображения или шрифты, используя опцию url(). После запуска задачи (и создаются style.min.css) эти ссылки разбиты - никаких изменений в путях, найденных в исходных файлах CSS, не было.

Не стоит cleanCSS проверить, где находятся указанные файлы, и исправить пути автоматически? Не используются ли опции target и relativeTo?

Как это исправить? Спасибо.

Answer 1

мне удалось решить проблему, мои основные проблемы были неуместны concat операции разрыва gulp-clean-css Rebase функции и неправильные target и relativeTo варианты. По-видимому, я мало думал о предыдущем рабочем процессе.

var gulp = require("gulp"), 
    concat  = require("gulp-concat"), 
    cleanCSS = require("gulp-clean-css"), 
    sourcemaps = require("gulp-sourcemaps"); 

var styleList = [ 
    "Resources/Include/ionicons/css/ionicons.css", 
    "Resources/base.css", 
    "Resources/extra.css", 
    "Resources/Include/teste/base.css" 
]; 

gulp.task("deploy-css", function() { 
    gulp.src(styleList) 
    .pipe(sourcemaps.init()) 
    .pipe(cleanCSS({ 
      compatibility: "ie8", 
      keepSpecialComments : 0, 
      target: "Resources", 
      relativeTo: "" 
     }) 
    ) 
    .pipe(concat("style.min.css", {newLine: ""})) 
    .pipe(sourcemaps.write()) 
    .pipe(gulp.dest("Resources")) 
}); 

Этот новый рабочий процесс работает:

1. Оптимизировать все отдельные CSS-файлы - в том числе перебазирования URLs;
2. Связь с отдельными оптимизированными файлами в конечном файле - (примечание newLine: "" позволяет избежать разрывов строк в файле);
3. Запишите файл.