gulp-revのリビジョン付のファイル名を任意の形式にフォーマットするgulpプラグインを書きました

はじめに

ブサウザにファイルのキャッシュを捨てさせる目的でファイル名をリビジョン付きのものにする、ということは多々あるかと思います。 gulp でそれを行うためにgulp-revがよく使われていますね。
gulp-rev はファイルの内容をhashにしたものをリビジョンとして [ファイル名]-[revision].[拡張子] の形式で付与します。

今回は、やんごとなき事情により、 gulp-rev で生成されるリビジョン付のファイル名のフォーマットを任意の形式に変更したい、という状況になったので、 gulp-rev と連携して任意のフォーマットでリビジョンを付与できるプラグインを書きました。

www.npmjs.com

使い方

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 を追加したい場合はそちらを使うとよいのではないかと思います。

関連リンク

• gulp-rev
• gulp-rev-format