Gulp任务:CleanCSS和路径

时间:2016-09-25 03:24:09

标签: css gulp minify gulp-clean-css

我已经用Gulp创建了一个任务:

  1. 加入多个CSS文件;
  2. 缩小+删除不必要的CSS;
  3. 修复url()指令及其他指令的路径;
  4. 生成源地图;
  5. 我目前的代码是:

    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应该检查引用文件的位置并自动修复路径?用于控制该选项的选项targetrelativeTo不是吗?

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

1 个答案:

答案 0 :(得分:0)

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

relativeTo

这个新的工作流程如下:

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