次の要件があります。
- css ファイルを連結します。
- 連結された css ファイルを改訂します。
- css ファイル (画像、フォントなど) によって参照される Rev リソース ファイル。ファイル参照は相対的なものであり、サードパーティからのものであるため、私はそれらを制御できません。
- 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 -->