6

次の要件があります。

  1. css ファイルを連結します。
  2. 連結された css ファイルを改訂します。
  3. css ファイル (画像、フォントなど) によって参照される Rev リソース ファイル。ファイル参照は相対的なものであり、サードパーティからのものであるため、私はそれらを制御できません。
  4. revving のために css ファイル内のファイル参照を書き換え、元のファイルではなく、連結されたファイルに対して相対的なものにします。

私のプロジェクトのレイアウト:

  dist/
    index.html
    app-<hash>.css
    bower_components/
      bootstrap/
        fonts/
          glyphicons-halflings-regular-<hash>.woff
          glyphicons-halflings-regular-<hash>.ttf
          etc...
  app/
    index.html
    appStyles.css
    bower_components/
      bootstrap/
          dist/
              css/
                bootstrap.css
                etc...
          fonts/
              glyphicons-halflings-regular.woff
              glyphicons-halflings-regular.ttf
              etc...

したがって、例として、bootstrap.css は相対パス「../../fonts/glyphicons-halflings-regular.ttf」を使用して glyphicons-halflings-regular.ttf を参照します。これを相対パス「bower_components/bootstrap/fonts/glyphicons-halflings-regular-hash.ttf」に書き換える必要があります。

css ファイルを連結して出力​​を改訂する gulp-usemin タスクを動作させることができました。ソースマップでも動作しますが、これはおまけです (必須ではありません)。

しかし、usemin に css ファイルのパスを書き換えて、revving に合わせて調整し、それらを連結されたファイルに対して相対的にすることはできません。どうすればいいですか?css チェーンに別のプラグインが必要ですか? これが私がこれまでに持っているものです:

var resourcesRevved = [
    'app/bower_components/bootstrap/**/*.ttf',
    'app/bower_components/bootstrap/**/*.woff',
    etc...
];

gulp.task('copy:resources:revved', ['clean:dist'], function() {
    return gulp.src(resourcesRevved)
        .pipe(rev())
        .pipe(gulp.dest('dist'));
});

gulp.task('usemin', ['copy:resources:revved'], function() {
    return gulp.src('./app/index.html')
        .pipe(usemin({
            css: [
                sourcemaps.init({
                    loadMaps: true
                }),
                'concat',
                rev(),
                sourcemaps.write('.')
            ]
        }))
        .pipe(gulp.dest('dist/'));
    });

index.html の usemin セクションは次のとおりです。

<!-- build.css app.css -->
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="app/appStyles.css">
etc...
<!-- endbuild -->
4

0 に答える 0