Gulp 任务：CleanCSS 和路径答案

【问题标题】：Gulp Task: CleanCSS and PathsGulp 任务：CleanCSS 和路径
【发布时间】：2016-09-25 03:24:09
【问题描述】：

我用 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 选项不是用来控制的吗？

我该如何解决这个问题？谢谢。

【问题讨论】：

需要更多信息。 styleList 的值是多少？在处理之前，您的 url() 路径是什么样的？处理后它们应该是什么样子？参考资源在哪里？您需要提供minimal reproducible example。
@SvenSchoenung 检查我的编辑。
不可重现。运行您的示例产生src:url(Include/ionicons/fonts/ionicons.eot?v=2.0.0)。
@SvenSchoenung 我刚刚添加了一个最小的测试设置，以便您可以与您的/测试进行比较。

标签： css gulp minify gulp-clean-css

【解决方案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"))
});

这个新的工作流程如下：

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

【讨论】：