ドキュメントを見て単純に気づいただけなのですがメモ代わりに。
GruntのLiveReload実現手段としてよく紹介されているgrunt-contrib-livereloadは現在deprecated扱いになっており、代わりにwatchタスクのオプションでLiveReloadが指定できるようになっています。
事前準備
- grunt-contrib-watchでwatchタスクを準備しましょう。
- LiveReload対応のブラウザ拡張をインストールしておきましょう。How do I install and use the browser extensions? – LiveReload Help & Supportを参考に。
LiveReloadの設定方法と使い方
以下、詳しくはgruntjs/grunt-contrib-watchをご参照くださいなのですが、とりあえず試したいという方向けにざっくり書いておきます。
watchが走ったときにliveReloadするなら、
grunt.initConfig({
watch: {
options: {
livereload: true,
},
css: {
(略)
},
},
});
のように、watchのoptionとしてlivereload: true
としておけばOKです。あとは確認したいページを開き、ブラウザ拡張のボタンを押してwatch対象を更新すれば自動でリロードされます。簡単ですね!
ポート番号はデフォルトで35729
が使用されるようです。変更したい場合はlivereload: ポート番号
と書けばOKです。
LiveReloadの対象を絞りたい場合は、たとえばCSSのみに絞るなら
watch: {
css: {
options: {
livereload: true,
},
(略)
},
},
のように、watchターゲットの中にoptionで指定しましょう。