@ledsun blog

無味の味は佳境に入らざればすなわち知れず

Grunt livereload でファイルを修正したらブラウザを自動リロード

livereloadとは?

ファイルの変更を検知したらブラウザで読み込みなおすgrunt-contribe-watch プラグインのオプションです。 grunt-contribe-connectプラグインとブラウザ拡張と組み合わせて使います。

何がうれしいの?

クライアントJavaScriptの開発では

  1. エディタでJavaScriptファイルを修正
  2. ブラウザに切り替え
  3. ブラウザをリロード

の三つを頻繁に繰り返します。 この「ブラウザをリロード」を自動で行ってくれると、以下のような簡単な確認であれば ブラウザにフォーカスを切り替える必要がありません。

  • レイアウトが崩れていないか
  • エラーが起きないか

エラーが起きてデバッグをしたくなっったら、ブラウザに切り替えます。

ブラウザに切り替えないので

  1. エディタで Ctrl + S で保存
  2. ブラウザの表示を確認
  3. エディタで修正作業の続き

ブラウザにフォーカスを切り替えてエディタに戻したときに、カーソルの位置が移動していないか気にしなくてすみます。 地味な差ですが便利です。

どうやって使うの?

Gruntfile.jsに設定して、gruntコマンドで起動します。

事前準備

以下はインストール済みとします。

  • Node.js
  • grunt-cli

設定

Gruntプラグインのインストール

npm install grunt-contrib-watch grunt-contrib-connect

監視対象のファイルを作成

echo "hello" > index.html

Gruntfile.jsの作成

こんな感じです。

module.exports = function(grunt) {
  grunt.initConfig({
    watch: {
      files: 'index.html', //監視したいファイルを指定します。
      options: {
        livereload: true //livereloadを有効にします。
      }
    },
    connect: {
      uses_defaults: {} //空のサブタスクを入れます。名前は何でもいいです。ここではuses_defaultsにしました。
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
};

起動

grunt connect watch

順序を逆にすると、connectに到達する前にwatchで待機状態になります。

ブラウザに拡張をインストール

GoogleChrome拡張を入れる

ブラウザで開く

http://localhost:8000 を開いて右上のアイコンをクリックします。

f:id:ledsun:20131128180511p:plain が、f:id:ledsun:20131128180523p:plainに なると有効です。

アイコンがマジ見づらくて、初見では100% onになったことが分かりません。 真ん中が黒丸になったらonです。

変更してみる

index.htmlを変更してみましょう。

touch index.html

ブラウザがリロードします。