Gulpでキャッシュ対策パラメータを自動付与

Question

gulpでキャッシュ対策のために
ファイル末尾に?hogeとクエリー文字列を付与する処理をつけております。
function cache() {}内です。

例えば
scssを更新するごとに/include/のheader.htmlで呼んでいる

<link rel="stylesheet" href="/css/style.css?rev=e1e37390ef2c8dbc"> を <link rel="stylesheet" href="/css/style.css?rev=aaaaaaaaaaaaaaaa"> のようにまた別のパラメータに書き変えたいのですが、そのようなことは可能なのでしょうか？

cacheを実行すれば、一度パラメータがつくのですが、
現状として、一度パラメータがついてしまうとパラメータを再度更新することができないので、付与されたパラメータの記述を削除して、再度cacheを実行という原始的なことをしてます・・。

パラメータについてはこちらの記事を参考に入れました。
https://qiita.com/alice37th/items/535c860a7da35c9c04ff

// ----------------------------------------
// require
// ----------------------------------------
const gulp = require('gulp'); //gulp本体
const sass = require('gulp-sass'); //sassのコンパイル
const plumber = require('gulp-plumber'); //エラー時の強制終了を防止
const notify = require('gulp-notify'); //エラー発生時にデスクトップ通知する
const sassGlob = require('gulp-sass-glob'); //@importの記述を簡潔にする
const postcss = require('gulp-postcss'); //autoprefixerとセット
const autoprefixer = require('autoprefixer'); //ベンダープレフィックス付与
const rename = require('gulp-rename'); //出力先のディレクトリを変更
const saveLicense = require('uglify-save-license'); //ライセンスコメントを残す
const replace = require('gulp-replace'); //文字列の置換や削除
const crypto   = require('crypto'); //乱数をcryptoで生成
const sourcemaps = require('gulp-sourcemaps'); //ソースマップ

// ----------------------------------------
// 乱数生成
// ----------------------------------------
const revision = crypto.randomBytes(8).toString('hex');

// ----------------------------------------
// paths
// ----------------------------------------
const paths = {
	root: './',
	styles: {
		src: './css/**/*.scss',
		dest: './css/',
	},
};

// ----------------------------------------
// sass
// ----------------------------------------
function styles() {
	return gulp.src( paths.styles.src, { sourcemaps: true })
	.pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) ) //エラーチェック
	.pipe( sassGlob() ) 
	.pipe( sass({
		outputStyle: 'compressed'
	}) )
	.pipe( postcss([
			autoprefixer({
				"overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
				cascade: false
			}
	) ]) )
	.pipe( gulp.dest(paths.styles.dest, { sourcemaps: true })); 
}

// ----------------------------------------
// cache
// ----------------------------------------
function cache() {
	return gulp.src('./include/*.html')
	.pipe( replace('.css"','.css?rev=' + revision + '"') )
	.pipe( gulp.dest('./include/') );
}

function watch() {
	gulp.watch(paths.styles.src, styles);
}

exports.build = gulp.series(
	gulp.parallel(styles),
	gulp.parallel(cache),
);

exports.default = gulp.series(
	gulp.parallel(styles),
	gulp.parallel(cache),
	gulp.parallel(watch),
);

よろしくお願いします。

Answer 1

２点変更すればやりたいことが実現できるかと思いました。

1. revisionをcacheタスクの中に入れてタスクが実行される度にクエリパラメータを更新
2. gulp.watchでSassファイルの変更を検知してコンパイルする作業と一緒に上記cacheタスクも実行

gulp.watchの第２引数にはgulp.seriesで複数のタスクを指定することも可能です。

これでSassファイルが更新される度にクエリパラメータの値も更新されるのではないでしょうか。

function cache() {
   const revision = crypto.randomBytes(8).toString("hex");

   return gulp.src('./include/*.html')
     .pipe( replace('.css"','.css?rev=' + revision + '"') )
     .pipe( gulp.dest('./include/') );
}

function watch() {
    gulp.watch(paths.styles.src, gulp.series(styles, cahce));
}

• https://gulpjs.com/docs/en/api/watch#signature

Comments

[noel0718]

ご回答ありがとうございます。
やってみましたが、更新されませんでした・・・。

Answer 2

gulpにreplaceというプラグインがあります。正規表現が使えるので便利ですがいかがでしょう？

gulp.src(['file.txt'])
    .pipe(replace(/foo(.{3})/g, '$1foo'))
    .pipe(gulp.dest('build/file.txt'));

訂正
あ、もう使っているのですね。回答は無視してください。
失礼しました。