web-dev-qa-db-ja.com

gulp：ブラウザーのキャッシュを防止するために、要求にバージョン番号を自動的に追加します

サーバー上でgulpを使用してソースファイルをビルドして、プロジェクトを展開します。キャッシュの問題を防ぐためのベストプラクティスは、リクエストURLに一意の番号を追加することです。次を参照してください。 Webアプリケーションのアップグレード時のブラウザキャッシュの防止 ;

Npmリポジトリで、リクエストにバージョン番号を自動的に追加するツールが見つかりませんでした。私は誰かが以前にそのようなツールを発明したことがあるかどうか尋ねています。

可能な実装は次のとおりです。

src/フォルダにindex.htmlファイルがあり、次のスクリプトタグがあります

 <script src="js/app.js<!-- %nocache% -->"></script>

ビルド中にdist/フォルダーにコピーされ、コメントは自動インクリメント番号に置き換えられます

 <script src="js/app.js?t=1234"></script>
javascriptnode.jsnpmgulp
16
Dan

gulp-version-number このため。 URLに引数を追加することにより、HTMLドキュメント内のリンクされたスクリプト、スタイルシート、およびその他のファイルにバージョン番号を追加できます。例えば：

<link rel="stylesheet" href="main.css">

になる：

<link rel="stylesheet" href="main.css?v=474dee2efac59e2dcac7bf6c37365ed0">

サンプル実装で示したように、プレースホルダーを指定する必要さえありません。そして、それは構成可能です。

使用例：

const $ = gulpLoadPlugins();
const versionConfig = {
  'value': '%MDS%',
  'append': {
    'key': 'v',
    'to': ['css', 'js'],
  },
};

gulp.task('html', () => {
  return gulp.src('src/**/*.html')
    .pipe($.htmlmin({collapseWhitespace: true}))
    .pipe($.versionNumber(versionConfig))
    .pipe(gulp.dest('docroot'));
});
19
Serrano

gulp-revモジュールを使用できます。これにより、ファイルにバージョン番号が追加されます。バージョンはファイルコンテンツのハッシュなので、ファイルが変更された場合にのみ変更されます。

次に、ファイル間のマッピングを含むマニフェストファイルを出力します。 Scripts.jsからScripts-8wrefhn.js.

次に、ページコンテンツを返すときにヘルパー関数を使用して、正しい値をマップします。

上記のプロセスを使用しました。ただし、別のモジュールgulp-rev-allがあります。これは、gulp-revのフォーク型拡張機能で、もう少し機能します。ページ内のファイル参照の自動更新。

ここにドキュメント：

6
Jack

かなり多くの選択肢があるようです。

https://www.npmjs.com/package/gulp-cachebusthttps://www.npmjs.com/package/gulp-buster

お役に立てれば。

3
Chris W. Burke

[gulp-replace][1]とともに使用すると正常に機能する正規表現の作成に取り組みました。

以下のコードを見つけてください。以下は、viewfiles codeigniterフレームワークの画像とcssの簡単なコードです。ただし、ソースフォルダーが正しく指定されていれば、すべての種類のファイルに対して正常に機能するはずです。

用途に応じてコードをカスタマイズできます。

Gulp defaultまたは個別のタスクを一度に使用して、タスクをすべて呼び出すことができます。

'use strict';

var gulp = require('gulp');
var replace = require('gulp-replace');

function makeid() {
  return (Math.random() + 1).toString(36).substring(7);
}



gulp.task('versioningCss', () => {
  return gulp.src('application/modules/**/views/*.php')
    .pipe(replace(/(.*)\.css\?(_v=.+&)*(.*)/g, '$1.css?_v='+makeid()+'&$3'))
    .pipe(replace(/(.*)\.css\"(.*)/g, '$1.css?_v='+makeid()+'"$2'))
    .pipe(replace(/(.*)\.css\'(.*)/g, '$1.css?_v='+makeid()+'\'$2'))
    .pipe(gulp.dest('application/modules'));
});

gulp.task('versioningJs', () => {
  return gulp.src('application/modules/**/views/*.php')
    .pipe(replace(/(.*)\.js\?(_v=.+&)*(.*)/g, '$1.js?_v='+makeid()+'&$3'))
    .pipe(replace(/(.*)\.js\"(.*)/g, '$1.js?_v='+makeid()+'"$2'))
    .pipe(replace(/(.*)\.js\'(.*)/g, '$1.js?_v='+makeid()+'\'$2'))
    .pipe(gulp.dest('application/modules'));
});

gulp.task('versioningImage', () => {
  return gulp.src('application/modules/**/views/*.php')
    .pipe(replace(/(.*)\.(png|jpg|jpeg|gif)\?(_v=.+&)*(.*)/g, '$1.$2?_v='+makeid()+'&$4'))
    .pipe(replace(/(.*)\.(png|jpg|jpeg|gif)\"(.*)/g, '$1.$2?_v='+makeid()+'"$3'))
    .pipe(replace(/(.*)\.(png|jpg|jpeg|gif)\'(.*)/g, '$1.$2?_v='+makeid()+'\'$3'));
});

gulp.task('default', [ 'versioningCss', 'versioningJs', 'versioningImage']);
2
Satys