Gruntで結合したJSファイルに自動でタイムスタンプを付けてキャッシュを防止

結合したスクリプトファイルがブラウザキャッシュされる？

Gruntで複数のJavaScriptファイルを結合して、scripts.js とかにすることがよくある。
その場合、ファイルを更新してもブラウザキャッシュを読みに行ってしまうことがある。
ブラウザキャッシュを消せば良いが、ユーザーに毎回ブラウザキャッシュを消させるのは酷すぎる。

「grunt-cache-breaker」プラグインを使えば良い

そんな時に、scriptタグのsrc属性で読み込むURLにクエリパラメータで

scripts.js?ts=34534534534

のように文字列（例えばタイムスタンプ）をつけ、URLを変えるとブラウザが再度読みに行ってくれる。

この文字列は、バージョンアップのタイミングで更新しなくてはならないが、
それを自動更新してくれるのが、「grunt-cache-breaker」プラグイン。

インストール

もっとも簡単な使い方

Gruntfile.jsに以下の記述を追加
grunt.loadNpmTasks('grunt-cache-breaker');

grunt.initConfigの配列に以下を追加
ここでは、 files.src で指定した index.html の中の
scripts/scripts.js　および　scripts/vendor.js にタイムスタンプを付与している。

Gruntfile.js

    cachebreaker: {
      dev: {
          options: {
              match: ['scripts/scripts.js', 'scripts/vendor.js'],
          },
          files: {
              src: ['<%= yeoman.dist %>/index.html']
          }
      }
    }

実行したいタスクに、cachebreaker を追加する。
例えば、build タスクに追加するなら

Gruntfile.js

  grunt.registerTask('build', [
    '…省略',
    'cachebreaker' // ←追加
  ]);

以上の設定を追加して、

grunt build

すれば index.html 内のscriptタグが以下のように置き換えられる。

<script src="scripts/vendor.js?rel=1492500899044"></script>
<script src="scripts/scripts.js?rel=1492500899043"></script>