Railsアプリを変更したら自動でブラウザをリロードしてすぐ確認できる guard-livereload

guard-livereloadを使うとRailsアプリのビュー、CSS、JavaScriptなどを変更して保存すると同時に自動でブラウザをリロードして反映してくれるので、もうブラウザのリロードボタンを押す必要がなくなります。
まずはデモ動画


guard-livereloadはファイルの変更を監視して、変更を保存したときに色々なイベントを実行可能にするコマンドラインツールguardというgemを利用していて、今回のlivereloadの他にも、guard-rspecguard-cucumberでRSpecやcucumberで変更したら即座に自動で実行するなどが可能になります。

guard-rspec、今回のguard-livereloadについてはRailsCasts(ASCIIcasts)で紹介されています。

また、別途livereload単体のgemも提供されていますが、今回はguard-livereloadの方なので注意。

Guard関係のgem一覧
List of available Guards - GitHub

ちなみにRuby 1.9.1 1.8.7でテスト済みで、Rails 2.2.2 Ruby 1.8.6でも動いてます。

■guard-livereloadのインストール
gem install guard-livereload

Rails 3なら
Gemfileに
group :development do
 gem 'guard-livereload'
 ・
 ・
end
を追記して
bundle

■定義ファイルの作成
guard init livereload
rails_app/Guardfileが作成される
# A sample Guardfile
# More info at https://github.com/guard/guard#readme

guard 'livereload' do
watch(%r{app/.+\.(erb|haml)})
watch(%r{app/helpers/.+\.rb})
watch(%r{public/.+\.(css|js|html)})
watch(%r{config/locales/.+\.yml})
end
ここで、変更を保存した場合にリロードするファイルを指定する。

■ブラウザの設定
利用可能なブラウザはChrome、Firefox、Safariの3つ。

□Chrome
エクステンションをインストール
guardを起動して、Railsアプリのページを開きLRアイコンをクリックしてLiveReloadを有効にする。
chrome-livereloadgr.png

□Firefox
エクステンション※をインストール
※追記 Firefox 6以上の場合は0.6.3以上をダウンロード。

websocketを利用するので
URLバーに
about:configと入力 → 警告を確認 → フィルタにnetwork.websocketと入力
network.websocket.enabled
network.websocket.override-security-block

の両方をtrueにする。
firefox-livereload-aboutconfig.png

about:configタブを閉じて、guardを起動して、Railsアプリのページを開きブラウザの下に表示されるLRアイコンをクリックして緑になればOK
firefox-lilvereload.png
※エクステンション設定のPortは35729のままでOKなはず。

□Safari
Safariのエクステンションをダウンロードしてダブルクリックでインストール
使う際はguardを起動して、Railsアプリのページを開く → ページを右クリック → Enable LiveReload
safari_livereload.png

■guard-livereloadを使う
guardを起動
guard

Railsアプリを起動
rails start

ブラウザは先ほどの通りに、エクステンションを有効にする。
エクステンションの有効・無効は基本的にページ毎なので、動かないと思ったらちゃんと現在のページで有効になっているかをチェック。

これで、さきほどのGuardfileで監視対象にしたビュー(erb)、cssなどを変更して保存するとブラウザが自動でリロードされる!
特にCSSだけを変更した場合、firebugなどのエクステンション等でCSSを編集した時のように、ページ自体はリロードせずCSSだけ再読み込みして反映してくれるので、ブラウザをリロードするより早く結果を確認できるので超快適。


ブラウザは、いくつ開いていても大丈夫でタブが選択されていなくてもリロードしてくれる。
タグ:Rails Ruby gem
posted by digital-squad at 2011年06月09日 14時13分 | Comment(0) | TrackBack(0) | Ruby on Rails / Ruby
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック