Grunt-CacheBreakerの使い方

自分のサイトにCloudFlareを導入するにあたり、JS, CSSのファイルを更新した時に都度古いキャッシュを無効化できるよう、 Grunt-CacheBreaker を導入してみた。

Caching LevelをStandard(*1)にしている場合は、Gruntでコードをデプロイ用にビルドする時に、クエリ値にタイムスタンプを与えられれば良い。

Gruntfile.coffee

cachebreaker: 
  dev: 
    options: 
      match: ['styles/scritps/main.js', 'assets/styles/styles.css']
    files: 
      src: ['head.php']

options > match でロード時にクエリを加えたいファイル名を列挙。
files > src でそれらのファイルへの参照を持つファイルを指定

他にもオプションはあるので、クエリ値をファイル名に加えたい場合などは、ドキュメント参照。

---

*1 Caching Levelについてのヘルプ抜粋

What are CloudFlare's Caching Levels?

You can set CloudFlare's CDN to cache static content according to these levels:

No Query String: Only delivers files from cache when there is no query string.

Ignore Query String: Delivers the same resource to everyone independent of the query string.

Standard: Delivers a different resource each time the query string changes.