読者です 読者をやめる 読者になる 読者になる

もた日記

くだらないことを真面目にやる

Railsメモ(28) : Guard::LiveReloadでView変更時にブラウザを自動リロードする

github.com

Guard::LiveReloadというgemを使用すればView関連のファイルを変更したときにブラウザを自動でリロードすることができる。

guard-livereloadのインストール


Gemfileに下記行を追加してbundle installする。

group :development do
  gem 'guard'
  gem 'guard-livereload', '~> 2.4', require: false
end

Guardfileに設定を追加するために下記コマンドを実効する。

$ guard init livereload
22:58:13 - INFO - livereload guard added to Guardfile, feel free to edit it

以下の内容がGuardfileに追記される。
これでインストールは完了。

guard 'livereload' do
  watch(%r{app/views/.+\.(erb|haml|slim)$})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{public/.+\.(css|js|html)})
  watch(%r{config/locales/.+\.yml})
  # Rails Assets Pipeline
  watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html|png|jpg))).*}) { |m| "/assets/#{m[3]}" }
end


ブラウザ側の設定


Guard::LiveReloadを動作させるためにはブラウザに拡張機能をインストールする必要がある。
下記ページによるとSafari, Firefox, Chromeに対応しているようだ。

Chromeを使用して開発しているので下記拡張機能をインストールする。

chrome.google.com

インストールが完了するとChromeの右上に以下のアイコンが追加される。
f:id:wonder-wall:20150822142757p:plain

Vagrantで動作させる方法


Vagrantを使用している場合は、追加で設定の変更が必要。
LiveReloadはデフォルトで35729番ポートを使用するので、ホストマシンへのアクセスをゲストマシンへポートフォワードするようにVagrantfileに下記設定を追加して再起動する。

config.vm.network "forwarded_port", guest: 35729, host: 35729
$ vagrant reload

なお、この設定以外にsshの設定を変更したり、guardに-p -l 1オプションを追加して起動という説明もあったが、自分の環境では設定しなくても動作した。


guard-livereloadの使い方


rails serverを起動してブラウザでアプリを表示させて、Guardを起動する。

$ guard
14:47:50 - INFO - LiveReload is waiting for a browser to connect.
14:47:51 - INFO - Guard is now watching at '/home/vagrant/rails/billboard'

ブラウザ接続待ちというメッセージが表示されるので、ChromeのLiveReloadアイコンをクリックする。
正しく接続が完了するとアイコンがf:id:wonder-wall:20150822142757p:plainからf:id:wonder-wall:20150822145256p:plainに変わり、Guardには下記メッセージが表示される。

[1] guard(main)> 14:50:45 - INFO - Browser connected.

もし接続がうまくいかない場合は下記ダイアログが表示される。

f:id:wonder-wall:20150822145450p:plain

ブラウザに正しく接続された後にビューファイルを編集してみると、Guardには下記メッセージが表示され、ブラウザが自動でリロードされるのでわざわざ手動でリロードする必要がなくなる。

14:52:04 - INFO - Reloading browser: app/views/songs/index.html.erb


guard-livereloadの設定


設定可能なオプションは下記項目で、システムへ通知したい場合はnotify: trueを、一定時間後にリロードしたい場合はgrace_periodを指定する。

notify: true          # default false
host: '127.3.3.1'     # default '0.0.0.0'
port: '12345'         # default '35729'
apply_css_live: false # default true
override_url: false   # default false
grace_period: 0.5     # default 0 (seconds)
guard 'livereload', grace_period: 0.5, override_url: true do
  # ...
end

パーフェクト Ruby on Rails

パーフェクト Ruby on Rails