HTMLやCSSの変更を自動でブラウザに反映させる

概要

• LiveReloadをguardで起動する。
• すると、guardがHTMLやCSSの変更をキャッチしてLiveReloadでブラウザが自動でリロードされる。
• これを見た方がはやい。
• サブディスプレイに複数のブラウザを立ちあげてLiveReloadをオンにして、ファイルの変更がいっぺんにそれらのブラウザに反映されるのが感動。鳥肌もの。

手順

1. guard-livereloadをbundleでいれる
2. guard init livereloadでGuardfileを設定する。
3. guardでファイルの変更のウォッチをスタート。
4. ブラウザのアドオンでLiveReloadをオンにする

Rails

group :development, :test do
  gem 'rb-fsevent' if RUBY_PLATFORM =~ /darwin/i
  gem 'guard-livereload'
end

$ bundle install
$ guard init livereload
$ guard

アドオンたち

• Firefox：https://addons.mozilla.org/ja/firefox/addon/livereload/、最新版（v12）ではうまく動かなかったので、これのためだけにv5までダウングレードしてる。
• Chrome：https://chrome.google.com/webstore/detail/jnihajbhpnppcggbcgedagnkighmdlei
• Safariもあるらしい。
• IEにもほしいけど、どうなんだろう。