吞咽任务：清理CSS和路径

我已经创建了一个包含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)

测试文件夹：（安装并运行

gulpdeploycss

）

除了CSS文件使用

url（）

选项包含对图像或字体的引用外，几乎所有内容都按预期工作。在运行任务（以及

style.min.css

created）后，这些引用被破坏-在原始css文件上找到的路径没有任何更改

cleanCSS

不应该检查引用文件的位置并自动修复路径吗？选项

target

和

relativeTo

不是用来控制它的吗

---

我怎样才能解决这个问题？谢谢。

我设法解决了这个问题，我的主要问题是一个错位的

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

将单个优化文件联系到最终文件中-（注意

换行：“

避免文件中的换行符）

写这个文件

---

需要更多信息。

样式列表的值是多少？处理前，您的
url（）
路径是什么样子的？处理后它们应该是什么样子？参考资料资源在哪里？您需要提供一个@svenschoenng检查我的编辑。不可复制。运行您的示例会产生
src:url（Include/ionicons/font/ionicons.eot？v=2.0.0）
@svenschoenng我刚刚添加了一个最小的测试设置，以便您可以与您的/test进行比较。