css - Gulp を使用して CSS ファイルを連結/再配置する

Question

以下を提供する Gulp で使用するプラグインチェーンを探しています。

ソースマップのサポート
以下
縮小化
連結
再配置/連結に対処するための URL 置換 (リベース)

現在、最初の 4 つを持っていますが、最後の (URL リベース) も提供する既存のプラグインの組み合わせが見つかりません。ソースマップを発行する URL リベースプラグインは見つかりませんでした。

明確にするために、私の問題は、プロジェクト開発フォルダーから複数の小さな CSS ファイルをコンパイルし、それらを共通のフォルダーに出力すると、連結による移動により、背景画像などの相対 URL が壊れることです。

編集:

私が現在使用しているツールチェーンは、すでにこの問題を解決することを意図しているようです。だから、それが表向きの答えです。しかし、それは別の問題を提起します。それは、必要な構文がどのように機能するはずなのかということです。

その質問には、理論的には多くの重複があります。

残念ながら、実際に構文を説明する答えはありません。ブードゥーを示しているだけです。そのため、以下が機能しない理由がわかりません。解決できる場合は、ここに戻って、このツールチェーンが実際に必要なことを行っていることを示すために、承認済みのフラグを立てます。

ソースファイル:

/assets
    /site
        styleInput1.less "url(../site/logo.png)"
        logo.png
        background.png
    /application
        styleInput2.less "url(../site/background.png)"

一気飲みタスク:

gulp.task(filename, function () {
    return gulp.src(files)
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(minifyCss({ relativeTo: './compiled' }))
        .pipe(concat(filename))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./compiled'));
});

壊れた URL を含む出力。複数の欠陥に注意してください。CSS は、必要なアセットに関連するディレクトリレベルを上げていますが、追加の親ディレクトリが追加されています (!)。また、URL の 1 つで、ハードアセットフォルダー名が変更されています (!)。非常に奇妙な：

/compiled
    styleOutput1.css "url(../../compiled/logo.png)"
    styleOutput2.css "url(../../site/background.png)"

ブードゥー教を続けて申し訳ありませんが、これが私の作業用のgulpパイプです：

.pipe(minifyCss({ relativeTo: './compiled', target: './compiled' }))

そして正しい出力：

/compiled
    styleOutput1.css "url(../assets/site/logo.png)"
    styleOutput2.css "url(../assets/site/background.png)"

score 6 · Accepted Answer

個人的にはgulp-minify-cssを使ってrelativeTo属性を指定しています。

gulp.task('css', function() {
    gulp.src('./assets/css/main.css')
// Here I specify the relative path to my files
      .pipe(minifyCSS({keepSpecialComments: 0, relativeTo: './assets/css/', processImport: true}))
      .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
      }))
      .pipe(gulp.dest('./assets/css/dist/'))
      .pipe(notify({
          "title": "Should I Go?",
          "subtitle": "Gulp Process",
          "message": '<%= file.relative %> was successfully minified!',
          "sound": "Pop",
          "onLast": true
      }));
  });

それがうまくいかない場合は、URL をリベースするための他の多くのパラメーターがあります: https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-programmatically

特に:

rebase- URL のリベースをスキップするには、false に設定します
relativeTo- 相対 @import ルールと URL を解決するためのパス
restructuring- 高度な最適化での再構築を無効にするには、false に設定します。
root- 絶対 @import ルールを解決し、相対 URL をリベースするためのパス

css - Gulp を使用して CSS ファイルを連結/再配置する

1 に答える 1

Related

Reference