鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

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

またもやQiitaに書いた簡単な内容のものをこちらにも。

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

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