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