Задача Gulp: CleanCSS и Пути

Question

Я создал задачу с Gulp, которая должна:

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 перебазировать фича и неправильно 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-файлы, включая перебазирование URL-адресов;
2. Связаться с отдельными оптимизированными файлами в окончательный файл - (примечание newLine: "" избегает разрывов строк в файле);
3. Напишите файл.