咕嘟咕嘟任務：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用於控制？

我該如何解決這個問題？謝謝。

來源

2016-09-25 TCB13

需要更多信息。 '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: ""避免文件中的換行符）;
寫入文件。

來源

2016-09-25 15:16:36 TCB13

咕嘟咕嘟任務：CleanCSS和路徑

回答

相關問題