sinatra + guard + foreman + chrome で LiveReload 環境を整える

sinatra + guard + foreman + chrome で LiveReload するための環境を簡単にまとめてみました。

ブラウザのリロードは Chrome の LiveReload を使用します。

require 'sinatra'
require 'sinatra/reloader' if development?

get '/' do
  "Hello, World"
end

source :rubygems

gem 'sinatra'
gem 'haml'
 
group :development do
  gem 'sinatra-contrib'
  gem 'guard'
  gem 'guard-livereload', require: false
end

guard 'livereload' do
 # sinatra
  watch(%r{.+\.rb})
  watch(%r{views/.+\.(haml|sass|css)})
end

guard: bundle exec guard -i
web: bundle exec ruby app.rb -p 5000

ファイルを作成し終わったら bundle で gem のインストールします。

$ bundle intall

今回は foreman で guard と sinatra を一緒に起動します。

$ foreman start

実行するコマンドなどは Procfile ファイルで設定します。
コマンドオプションなどを指定したい場合はこのファイルを編集します。

http://localhost:5000/ にアクセスしてページを開きます。
ページを開いたあとに LiveReload のアイコンをクリックします。
Chrome に LiveReload の拡張をインストールしたら以下のようなアイコンが URL バーの右側に追加されています。

クリックしたら foreman を起動しているコンソールに

23:00:30 guard.1 | 23:00:30 - INFO - Browser connected.

とログが追加されているのを確認してください。

あとは app.rb などを編集して保存すれば自動的にブラウザが更新されます。
これで最低限の LiveReload 環境を実現することができます。