grunt

grunt-contrib-watchしてれば簡単にLiveReloadできる

More than 5 years have passed since last update.

ドキュメントを見て単純に気づいただけなのですがメモ代わりに。

GruntのLiveReload実現手段としてよく紹介されているgrunt-contrib-livereloadは現在deprecated扱いになっており、代わりにwatchタスクのオプションでLiveReloadが指定できるようになっています。


事前準備


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で指定しましょう。