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に対応しているようだ。

• How do I install and use the browser extensions?

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

chrome.google.com

インストールが完了するとChromeの右上に以下のアイコンが追加される。

Vagrantで動作させる方法

---

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

config.vm.network "forwarded_port", guest: 35729, host: 35729

$ vagrant reload

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

• Running Guard in Vagrant | Justin Navarro | Blog
• Vagrant環境にLive Reloadを設定する - 麹町で働くWebエンジニアのメモ帳

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アイコンをクリックする。
正しく接続が完了するとアイコンがからに変わり、Guardには下記メッセージが表示される。

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

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

ブラウザに正しく接続された後にビューファイルを編集してみると、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