jekyllとcompassとlivereloadでフロントエンド開発

Gemfileを以下のように編集。

# -*- mode: ruby; -*-

source 'https://rubygems.org'

gem 'jekyll'
gem 'jekyll-compass'
gem 'compass', '~> 0.12.7'
gem 'breakpoint'
gem 'guard'
gem 'guard-jekyll-plus', '~> 1.4.9'
gem 'guard-livereload', '~> 2.3.0'

bundle installを実行。

bundle install

Guardfileを編集。

guard 'jekyll-plus', :serve => true do
  watch /.*/
  ignore /^_site/
end

guard 'livereload' do
  watch /.*/
end

guardを起動。

guard

http://localhost:4000にアクセス。

Livereloadのブラウザ拡張をインストール。
http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

Livereloadのボタンを押すと、guardを起動したコンソールで、22:46:58 - INFO - Browser connected.と表示される。

これでファイルを編集するとブラウザが自動更新されるようになる。