livereloadとは?
ファイルの変更を検知したらブラウザで読み込みなおすgrunt-contribe-watch プラグインのオプションです。 grunt-contribe-connectプラグインとブラウザ拡張と組み合わせて使います。
何がうれしいの?
クライアントJavaScriptの開発では
- エディタでJavaScriptファイルを修正
- ブラウザに切り替え
- ブラウザをリロード
の三つを頻繁に繰り返します。 この「ブラウザをリロード」を自動で行ってくれると、以下のような簡単な確認であれば ブラウザにフォーカスを切り替える必要がありません。
- レイアウトが崩れていないか
- エラーが起きないか
エラーが起きてデバッグをしたくなっったら、ブラウザに切り替えます。
ブラウザに切り替えないので
- エディタで Ctrl + S で保存
- ブラウザの表示を確認
- エディタで修正作業の続き
ブラウザにフォーカスを切り替えてエディタに戻したときに、カーソルの位置が移動していないか気にしなくてすみます。 地味な差ですが便利です。
どうやって使うの?
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 を開いて右上のアイコンをクリックします。
が、に なると有効です。
アイコンがマジ見づらくて、初見では100% onになったことが分かりません。 真ん中が黒丸になったらonです。
変更してみる
index.htmlを変更してみましょう。
touch index.html
ブラウザがリロードします。