1

次のことを想定した Gulp でタスクを作成しました。

  1. 複数の CSS ファイルを結合します。
  2. 不要な CSS を縮小 + 削除します。
  3. url()ディレクティブなどのパスを修正します。
  4. ソース マップを生成します。

これに対する私の現在のコードは次のとおりです。

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使用されていませんか？

どうすればこれを修正できますか? ありがとうございました。

4

1 に答える 1

1

私は問題を修正することができました.私の主な問題は、リベース機能をconcat壊す誤った操作と間違ったオプションでした. どうやら以前のワークフローについてはあまり考えていなかったようです。gulp-clean-csstargetrelativeTo

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"))
});

この新しいワークフローは次のように機能します。

  1. URL のリベースを含め、すべての個々の CSS ファイルを最適化します。
  2. 個々の最適化されたファイルを最終ファイルに接続します - (ファイル内newLine: ""の改行を避けることに注意してください);
  3. ファイルを書き込みます。
于 2016-09-25T15:16:36.463 に答える