Guardを使ってファイル更新時にブラウザをオートリロード

ファイルを変更したらブラウザを自動でリロード、という開発効率うｐの技がGuardを使うと簡単にできるよという話。

とりあえずFirefox派としてguard-mozreplを使ってみましょう。

Firefox側での下準備

MozReplを入れて

ツール -> MozRepl -> Start

しときましょう。

guard-mozreplの導入

まずGemを入れる。もちろんBundlerを使ってもよろしい。
Guardの動作に必要なGemもついでに入れる。

gem install guard-mozrepl rb-fsevent growl

上記はMacの場合で、LinuxやWindowsの場合は必要なGemが異なる。
詳細はGuardのREADMEに書いてあるのでそちらを参照のこと。

Guardfileの作成

次にプロジェクトのディレクトリで次のコマンドを実行。

guard init mozrepl

これでGuardfileにguard-mozrepl用のコードが書き込まれる。
Guardfileはなければ作成され、既存の物があればそれに追記される。

guard 'mozrepl' do
  watch(/app\/.+\.(erb|haml)/)
  watch(/app\/helpers\/.+\.rb/)
  watch(/public\/(.+\.(css|js|html))/) { |m| m[1] }
  watch(/config\/locales\/.+\.yml/)
end

デフォルトで生成されるこのコードはRails用ってかんじだけど監視対象のファイルを変更すれば言語やフレームワーク問わず使える。
正規表現で指定できるので適当に書き換えましょう。

監視の開始

Guardfileのあるディレクトリで

guard

これで監視対象ファイルをいじるとブラウザがリロードされるようになる。
エディタ側でいろいろ面倒なことをせずに、というかエディタ問わず使えるところがイカス。

おまけ

ChromeやSafariの人にはguard-livereloadというものがある。

guard-egoを入れとくとGuardfileを修正した後に手動でguardを再起動しなくて良いので便利。

ほかにもいろいろ。
Guardスゲー便利。

2011/07/31追記

LiveReloadのFirefox版も見つけた。
MozReplよりLiveReloadの方がリロードするタブを固定できるのでいいかんじ。

• LiveReload :: Add-ons for Firefox