環境はWindows7です。
もしRubyが入っていなかったら下記ページを参考にインストールしてください。
WindowsにCompassをインストールしてSASS/SCSS環境を構築する
guardのインストール
「gem install」で必要なライブラリをインストールします。
$ gem install guard
$ gem install guard-compass
$ gem install wdm
「gem list」でちゃんとにインストールされたか確認してみましょう。
CompassでSASS(SCSS)をコンパイル
「cd」で作業ディレクトリ(works)に移動して、
$ cd /c/works/
下記コマンドを実行すると「Guardfile」ファイルが作成されます。
$ guard init compass
ファイル構成はこんな感じです。
works
├Guardfile
└assets
├config.rb
├css
└sass
「assets」ディレクトリの中は基本的にCompassの設定になります。特に「config.rb」の設定に関しては先ほどの記事を参考にしてください。
次に「Guardfile」を開くとすでに何か書かれていると思いますが、下記に置き換えます。
Guardfile
guard 'compass', :project_path => 'assets', :configuration_file => 'assets/config.rb' do watch('^assets/sass/(.*)\.s[ac]ss') end
これで準備はOK。下記コマンドを実行するとファイルがsassディレクトリが監視されます。
$ guard
sassファイルを編集すれば、コンパイル処理が実行されます。
監視を停止するには「Ctrl + c」を入力します。
guard / guard-compass
CoffeeScriptをコンパイル
$ gem install guard-coffeescript
Guardfileに下記を追加します。
Guardfile
guard 'coffeescript', :input => 'assets/coffee', :output => 'assets/js'
書いた通り「assets」ディレクトリに「coffee」と「js」を作成したら、また「guard」を実行。
$ guard
「coffee」ディレクトリにあるCoffeeScriptファイルを編集すれば、「js」ディレクトリにjsファイルを書きだしてくれます。
guard / guard-coffeescript
というわけで、これで「guard」コマンドだけで、「sass」と「CoffeeScript」をまとめて監視できるようになったわけですが、他にも「Less」とか「Markdown」とか色々ありますので、下記を確認してみてください。
List of available Guards
最近だとnode.js+Gruntがいいらしいですが、私の環境だとうまくwatchできませんでした、、、