背景
キャッシュ対策を行っていなかったため、毎回ソース差し替え後にブラウザ側のキャッシュクリアが必要だった。js、cssファイルについては、ファイル名にビルド時にハッシュ値をつけるようにしていたため、対策を取れていたがhtmlファイルについては、未対応だった。
なぜ、htmlファイルだけ未対応だったのか。
js、cssファイルのビルド時のハッシュ値付与は、gruntのfilerevディレクティブで行っていた。filerevディレクティブはhtmlのハッシュ値付与は対応していない(厳密にはハッシュ値付与はできるが、usermin時に紐付きがうまくいかない)
環境
- AngularJs1.4
- ビルドツール(grunt)
解決方法
以下2点の対応を行いました。
そうすることで、ハッシュ値を付与することができるようにする。
最終的には、usminを利用して他のjsファイルとあわせて1つのファイルにしています。
htmlファイルをjsにする
→grunt-angular-templatesを利用※
grunt-angular-templatesとは、$templateCacheサービスを利用したもの。
これを利用することで複数のhtmlファイルを１つにまとめることができる。
一つめの対応では、各テンプレートファイル(html)を呼びだす大元のindex.htmlだけはまとめることはできないので、これについてはmetaタグで対応を行いました。
index.htmlの<head>タグで以下を指定
※no-cacheは、キャッシュを取らないという意味ではなく、キャッシュを利用するか毎回Webサーバに問い合わせにいく
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
※grunt-angular-templatesの使いかた
-
grunt-angular-templatesを有効にする
Gruntfile.jsに以下を追加
grunt.loadNpmTasks('grunt-angular-templates'); - まとめる対象のhtmlのパスと出力先、ファイル名を定義
ngtemplates:
app:
cwd: 'app'
src: 'templates/**.html',
dest: '.tmp/template.js'
3.gruntのbuildタスク時にngtemplateを実施するよう定義
grunt.registerTask('build', [
'clean:dist',
'wiredep',
'useminPrepare',
'ngtemplates',
'concurrent:dist',
'autoprefixer',
'concat',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
]);
4.他のjsファイルと最終的には一つにするため(usemin)のための記載
template.jsが複数htmlを一つにまとめたものになります。
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src=".tmp/template.js"></script>
5.grunt buildを実施
確認
Chromeのデベロッパーコンソールで、以下を確認。
- index.htmlについては、HTTPステータスコードが304(サーバ上のファイルが更新されていなかったのでキャッシュを利用)
- jsにしたhtmlファイルがリリース後は、新しく読み込まれること(キャッシュを使用しないこと）
以下記事を参考にさせていただきました。
http://qiita.com/katahirado/items/95dfc456c73fb6389e27
http://qiita.com/izumin5210/items/6489476c650c022e402a