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

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

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