gulp-revのリビジョン付のファイル名を任意の形式にフォーマットするgulpプラグインを書きました
はじめに
ブサウザにファイルのキャッシュを捨てさせる目的でファイル名をリビジョン付きのものにする、ということは多々あるかと思います。 gulp
でそれを行うためにgulp-revがよく使われていますね。
gulp-rev
はファイルの内容をhashにしたものをリビジョンとして [ファイル名]-[revision].[拡張子]
の形式で付与します。
今回は、やんごとなき事情により、 gulp-rev
で生成されるリビジョン付のファイル名のフォーマットを任意の形式に変更したい、という状況になったので、 gulp-rev
と連携して任意のフォーマットでリビジョンを付与できるプラグインを書きました。
使い方
npm
でインストールできます。
$ npm install --save-dev gulp-rev-format-re
以下のように、gulp-rev
の後に実行します。
const rev = require('gulp-rev'); const format = require('gulp-rev-format-re'); gulp.task('default', () => { gulp.src('./src/style.css') .pipe(rev()) .pipe(format('[% rev %].[% filename %]')) .pipe(gulp.dest('./dist')) .pipe(rev.manifest()) .pipe(gulp.dest('./dist')); });
gulp-rev-format-re
は、引数に与えた文字列の下記のパラメータを、それぞれオリジナルのファイル名とgulp-rev
の出力したリビジョンに置き換えます。拡張子は自動で最後に付与されます。
[% rev %]
:gulp-rev
で付与されたリビジョン[% filename %]
: オリジナルのファイル名
上記の例では、出力されるファイル名はxxxxxxxx.style.css
のようにフォーマットされます。
前後や間に任意の文字列を挿入することもできます。
format('head-[% filename %]-prefix-[% rev %]-suffix')
とすると、head-style-prefix-xxxxxxxx-suffix.css
のようにフォーマットされます。
おわり
中身は大したものではない&やんごとなき事情で書いたのであまり利用ケースが思いつかない気はしますが、何かお役に立てることがあれば幸いです。
類似のプラグインとして、gulp-rev-formatがあるので、[ファイル名][prefix][revision][suffix].[拡張子]
の順番を保ったまま任意のprefix
suffix
を追加したい場合はそちらを使うとよいのではないかと思います。