railsのGemfileに下記追加
chromeにhttps://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
をインストール
chromeのlivereloadの設定を「ファイルのURLへのアクセスを許可する」にチェックを入れる
Gemfile
gem 'guard'
gem 'guard-shell'
gem 'guard-livereload'
Guardfile
directories %w(app lib config test spec features) \
.select{|d| Dir.exists?(d) ? d : UI.warning("Directory #{d} does not exist")}
Note: if you are using the directories
clause above and you are not
watching the project directory ('.'), then you will want to move
the Guardfile to a watched dir and symlink it back, e.g.
$ mkdir config
$ mv Guardfile config/
$ ln -s config/Guardfile .
and, you'll have to watch "config/Guardfile" instead of "Guardfile"
guard 'livereload' do
extensions = {
css: :css,
scss: :css,
sass: :css,
js: :js,
coffee: :js,
html: :html,
png: :png,
gif: :gif,
jpg: :jpg,
jpeg: :jpeg,
# less: :less, # uncomment if you want LESS stylesheets done in browser
}
rails_view_exts = %w(erb haml slim)
# file types LiveReload may optimize refresh for
compiled_exts = extensions.values.uniq
watch(%r{public/.+.(#{compiled_exts * '|'})})
extensions.each do |ext, type|
watch(%r{
(?:app|vendor)
(?:/assets/\w+/(?[^.]+) # path+base without extension
(?.#{ext})) # matching extension (must be first encountered)
(?:.\w+|$) # other extensions
}x) do |m|
path = m[1]
"/assets/#{path}.#{type}"
end
end
# file needing a full reload of the page anyway
watch(%r{app/views/.+.(#{rails_view_exts * '|'})$})
watch(%r{app/helpers/.+.rb})
watch(%r{config/locales/.+.yml})
end
guard 'livereload' do
watch(%r{app/views/.+.(erb|haml|slim)$})
watch(%r{app/helpers/.+.rb})
watch(%r{app/controllers/.+.rb})
watch(%r{public/.+.(css|js|html)})
watch(%r{config/locales/.+.yml})
# Rails Assets Pipeline
watch(%r{(app|vendor)(/assets/\w+/(.+.(css|js|html))).*}) { |m| "/assets/#{m[3]}" }
end
Guardfile末尾に下記のように追記するとmodelファイルも追跡できる
watch(%r{app/models/.+.rb})
コマンドは下記の通り
$ bundle install
$ bundle exec guard init livereload
$ bundle exec guard
参考にした記事
https://qiita.com/TAKAyuki_atkwsk/items/737066dd15b9886f5dad