Guardはコマンドラインツールで、ファイル変更を監視してコンパイルや結合などのタスクを実行できます。Middlemanでプロトタイプを構築して、既存システム（PHPベース）に移植という段取りだったのですが、Middlemanのディレクトリ構成をそのまま持ち込むことはできません。

Guardを採用した理由としては以下があります。CoffeeScript、concat、uglifyはまた今度に。

  • Compass、CoffeeScript、Slimといった様々なライブラリを複合で扱える
  • BundlerでGem管理ができる
  • Rubyベースなので資産を再利用しやすかった

まず、CompassとFoundationを導入する段取りについて。

Gemfile

Guardプラグイン各種を入れておきます。

# SASS & Compass
source ‘http://rubygems.org’

# V8 JavaScript Engine (for Uglifier)
gem “therubyracer”
gem "sass"
gem "compass"
gem "zurb-foundation"
gem "susy"
gem "compass-normalize"

# For concatenation/compression
gem "uglifier"

# Guard and plugins
gem "guard"
gem "guard-sass"
gem "guard-compass"
gem "guard-coffeescript"
gem "guard-livereload"
gem "guard-concat"
gem "guard-uglify"
gem "rb-fsevent"

Bundlerでインストールします。

bundle install --path vendor/bundler

config.rb

各種Gemをrequireしておきます。

require 'zurb-foundation'
require 'susy'
require 'compass-normalize'

Sassファイルでは以下のようにインポートしておきます。

@import "normalize";
@import "foundation";

Foundationについては、これですべてのスタイルが読み込まれます。

Guardfile

CompassでSassファイルをコンパイルするタスクを用意します。
正規表現で .scss と .sass 両方をコンパイル対象にしています。

guard :compass do
    watch(%r{sass/(.+\.s[ac]ss)})
end

Guard実行

bundle exec guard init
bundle exec guard

コマンドを実行するとタスクが実行され、さらにファイル変更の監視を始めます。

[1] guard(main)>