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

我设法解决了这个问题，我的主要问题是错误的#Region "This is the code to be collapsed" #End Region操作违反了concat rebase功能以及错误的gulp-clean-css和target选项。显然我对以前的工作流程没有太多考虑。

relativeTo

这个新的工作流程如下：

优化所有单个CSS文件 - 包括重新定位网址;
将个别优化文件联系到最终文件中 - （注意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")) });避免文件中的换行符）;
写文件。

Gulp任务：CleanCSS和路径

1 个答案: