CSSキャッシングを防ぐためにgulpを使用してindex.thmlを変更する方法はありますか？

Question

私はこのコードをgulpfile.js持っている：私はgulpfileは私が発行するたびに違ういくつかの数字が続く&に追加してもらうことができれば

gulp.task('make_prod_index', function() { 
    gulp.src('index.html') 
     .pipe(replace('content/bundles/css.min.css', 'content/bundles/css.min.css&12345')) 
     .pipe(rename("index-prod.html")) 
     .pipe(gulp.dest('./')); 
}); 

私が考えていた何がでした。

これはcssがキャッシュされないようにする方法でしょうか？もしそうなら、公開するたびに別の番号が追加されるようにするにはどうすればよいですか？

Answer 1

あなたはこのように、ファイルのMD5ハッシュを取得し、かなり簡単にファイルにそれを追加することができます：それは、クエリ文字列を追加避けるために、ほとんどのキャッシュのファイル名を変更する方が良いでしょうしかし

... 
var md5File = require('md5-file') 

gulp.task('make_prod_index', function() { 
    gulp.src('index.html') 
     .pipe(replace('content/bundles/css.min.css', 'content/bundles/css.min.css?' + md5File('content/bundles/css.min.css'))) 
     .pipe(rename("index-prod.html")) 
     .pipe(gulp.dest('./')); 
}); 

。一部のキャッシュでは、クエリ文字列を含むファイルが動的ファイルとして表示され、キャッシュされません。

gulp-revタスクで行うことができます。詳しくは、docsを参照してください。それはあなたの解決策によってもう少し仕事かもしれません。しかし、あなたが見るものから、gulp-rev-replaceのような単純なもので行くことができます。