LiveReload and Octopress

雖然平常沒什麼時間寫 blog，但總是希望寫的時候能夠專注在所寫的內容，而不必被發佈 blog 的一些瑣事而干擾，例如現在雖然已經習慣用 Pow 了，然後把 rake watch 開著，但要預覽時還是要回 Chrome 按一下 Reload 才能預覽目前的內容，有點小煩，所以看到有 LiveReload 這種好東西當然要拿來用啊。

簡單描述一下安裝的步驟:

安裝 guard-livereload:

$ gem install guard-livereload

修改 Gemfile 把下列這一行加進去 ‘guard-livereload’:

$ gem 'guard-livereload'

再來是改完 Gemfile 後的標準步驟:

$ bundle install

產生一份基本的 Guardfile:

$ guard init livereload

再來要修改 Rakefile 把啟動 guard 的動作放到 rake watch 裡面:

desc "Watch the site and regenerate when it changes"
task :watch do
  raise "### You haven't set anything up yet. First run `rake install` to set up an Octopress theme." unless File.directory?(source_dir)
  puts "Starting to watch source with Jekyll and Compass."
  system "compass compile --css-dir #{source_dir}/stylesheets" unless File.exist?("#{source_dir}/stylesheets/screen.css")
  jekyllPid = Process.spawn("jekyll --auto")
  compassPid = Process.spawn("compass watch")
  guardPid = Process.spawn("guard")

  trap("INT") {
    [jekyllPid, compassPid, guardPid].each { |pid| Process.kill(9, pid) rescue Errno::ESRCH }
    exit 0
  }

  [jekyllPid, compassPid, guardPid].each { |pid| Process.wait(pid) }
end

然後執行 rake watch:

$ rake watch
Starting to watch source with Jekyll and Compass.
Please install growl_notify or growl gem for Mac OS X notification support and add it to your Gemfile
Guard is now watching at '/Users/patrick/src/simplypatrick.heroku.com'
LiveReload 1.6 is waiting for a browser to connect.
Configuration from /Users/patrick/src/simplypatrick.heroku.com/_config.yml
Auto-regenerating enabled: source -> public
[2011-12-03 22:53:07] regeneration: 118 files changed
>>> Compass is watching for changes. Press Ctrl-C to Stop.

安裝 LiveReload extension (Chrome 請按這)
最後打開會修改的網頁，如果是使用 Chrome 要記得把網址列旁的 LR 按鍵按下才會生效喔，我在這裡卡了有點小久。

在 27" 螢幕上，左半邊寫文章，右半邊瀏覽器即時預覽，這樣的感覺太好了！