咕嘟咕嘟任务：CleanCSS和路径

问题描述：

我已经创建了一个咕嘟咕嘟的任务，应该是：咕嘟咕嘟任务：CleanCSS和路径

加入多个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（）'路径看起来像什么？处理后它们应该是什么样子？引用资源位于何处？你需要提供[mcve]。 –

@SvenSchoenung检查我的编辑。 – TCB13

不可复制。运行你的例子会产生'src：url（Include/ionicons/fonts/ionicons.eot？v = 2.0.0）''。 –

答

我设法解决这个问题，我的问题主要是放错了地方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文件 - 包括基础重建的网址;
将单个优化文件联系到最终文件 - （注意newLine: ""避免文件中的换行符）;
写入文件。

咕嘟咕嘟任务：CleanCSS和路径

相关推荐