雖然平常沒什麼時間寫 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” 螢幕上,左半邊寫文章,右半邊瀏覽器即時預覽,這樣的感覺太好了!