星期五, 10月 26, 2012

在Windows使用Guard-LiveReload

基本上,在Windows使用Guard-LiveReload,就是要用命令列,所以沒興趣的人就可以跳過。
首先,一定要參考JaceJu這篇 在 Windows 下使用 LiveReload ,雖然過了將近一年,但是仍然有用。我先簡單將步驟記錄如下:
  1. 安裝Ruby及DevKit
    我自己是加上一個bat檔,若每天都用到的朋友,可以直接改環境變數的Path
  2. 安裝LiveReload #這段沒有鐵神就毀了,我一開始卡關好久,因為Win32的eventmachine還是沒更新,必須裝Pre版本。
    gem install eventmachine --pre
    gem install eventmachine-win32 win32-changenotify win32-event livereload --platform=ruby
  3. 安裝guard-livereload
    gem install guard-livereload  rb-inotify compass
  4. 安裝Browser Extensions
    到 livereload.com上的browser extension 安裝最新版本 Extension
  5. Safari extension 2.0.9
    Chrome extension 記得若要允許 file:// 的檔案,要在LiveReload extension設定勾選“Allow access to file URLs”
    Firefox extension 2.0.8
這樣就裝好了,但是若要監控目錄,需要兩個設定檔:config.rb (Compass用) 及 Guardfile (guard-livereload用),本來一直搞不定,後來看到才知道少設什麼。
以下是簡單的範例:
config.rb
http_path = "/"
css_dir = "css"
sass_dir = "css"
images_dir = "images"
javascripts_dir = "js"
preferred_syntax = :scss
line_comments = false #不要產生註解
Guardfile
notification :on
# Current watch directory must contain the Compass config file.
if File.exists?("./config.rb")
  # https://github.com/guard/guard-compass
  guard 'compass' do
    watch(%r{(.*)\.s[ac]ss$})
  end
end

guard 'livereload' do
  watch(%r{.+\.(css|js|aspx|ashx|html|php|inc)$})
end
為了以防萬一,我建議再做一個 Gemfile
source "http://rubygems.org"
group :development do
  gem 'compass'            # Depends on Sass, will be installed automatically.
  gem 'compass-960-plugin' # 960.gs
  gem 'wdm', '~> 0.1'
  gem 'compass-validator'  # So you can `compass validate`.
  gem 'oily_png'           # Faster Compass sprite generation.
  gem 'css_parser'         # Helps `compass stats` output statistics.
  gem 'guard-compass'      # Compile on sass/scss change.
  gem 'guard-livereload'   # Browser reload.
  gem 'yajl-ruby'          # Faster JSON with LiveReload in the browser.
end
接著下指令:
gem update --system
gem install bundler
bundle

以上工作都完成,在目錄下輸入 bundle exec guard 就開始監控,可以在瀏覽器上啟動LiveReload extension了!

為什麼我這麼晚才寫這篇呢?這是因為我去年就在Mac上買了LiveReload2呀!有了它,根本就不用下指令,也不用裝Ruby,設一下全都有。

若要與Visual Studio整合,今年有個新產品, .Net Demon,有興趣的朋友自己去玩吧,我就不想花那筆錢。

Update: Windows上可以用 Compass.App ,價格合理多了,技術好的話,可以自己去抓 Github上 CompassApp 的 Source Code下來自己編。

沒有留言: