Gulp 任务：CleanCSS 和路径

Question

我用 Gulp 创建了一个任务，它应该：

加入多个 CSS 个文件；
缩小 + 删除不必要的 CSS;
修复 url() 指令和其他指令的路径；
生成源地图；

我目前的代码是：

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"))
});

这个新的工作流程是：

优化所有单个 CSS 文件 - 包括变基 url；
将个别优化文件联系到最终文件中-（注意newLine: ""避免文件中的换行符）；
写入文件。

Gulp 任务：CleanCSS 和路径

Gulp Task: CleanCSS and Paths

css

gulp

minify

gulp-clean-css