Windows環境下使用Guard整合Compass和Livereload進行SASS的開發

配置運行環境

Guard，Compass 和 Livereload 是 Ruby 的 Gem 套件，須要 Ruby 運行環境。另外還須要安裝 Ruby 的擴展開發包 Development-Kit，以實現 Livereload 的功能和 SASS 的編譯。最後須要 Bundler 用於打包 Gem 依賴。

安裝 Ruby

• 下載並安裝 Rubyinstaller。
• 安裝過程當中勾選相關設置，這樣能夠直接經過cmd命令行操做（沒必要手動添加Path）。
• 安裝完成後，在 CMD 窗口運行 ruby --version，若安裝成功會顯示 Ruby 版本信息。

安裝 Development-Kit

• 下載 Development-Kit。
• 將其解壓到某個目錄，例如：C:/DevKit/。
• 打開你的Development-Kit所在的位置，在裏面執行如下命令：

ruby dk.rb init
ruby dk.rb install

安裝 Bundler

• 更新 Gem 系統，而後安裝 Bundler：

gem update --system
gem install bundler

使用 Bundler 打包所需的 gem 依賴

• 打開用戶目錄，增長 Gemfile 和 .Guardfile 這兩個文件（文件內容見文末附件）。

• Shift+右鍵調出當前目錄CMD窗口，運行以下命令：

  bundle
  

Bundler 會根據 Gemfile 中的配置安裝 Compass 和 SASS 等 gem，安裝過程會比較久，打杯水靜靜等待 gem 安裝完成或執行下一步安裝瀏覽器的 Livereload 插件。

給瀏覽器安裝 Livereload 插件

Safari：Safari extension 2.0.9

Chrome：Chrome extension on the Chrome Web Store

Firefox：Firefox extension 2.0.8

詳見 Livereload 的官網：http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

運行 Guard

• 在項目目錄中運行：guard。
• 打開瀏覽器，點擊瀏覽器的 Livereload 圖標。

至此完成全部的配置，Compass 會檢測 Gemfile 定義文件的改動，生成 CSS，並自動刷新瀏覽器。

附件

如下是 Gemfile 和 .Guardfile 的內容：

Gemfile

source "http://rubygems.org"

group :development do
  gem 'compass' # Depends on Sass, will be installed automatically.
  # gem 'compass-960-plugin' # 960.gs
  # 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

 

.Guardfile

# More info at https://github.com/guard/guard#readme

notification :off

# 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

# If current or child directories has files we want to monitor for live changes.
# This may throw an error with ruby < 1.9.
require 'find'
if Find.find(Dir.pwd).detect{|dir|dir=~/.+\.(css|js|html?|php|inc)$/}
  # https://github.com/guard/guard-livereload
  guard 'livereload' do
    watch(%r{.+\.(css|js|html?|php|inc)$})
  end
end