WEBOPIXEL

SASSもCoffeeScriptもGuardでまとめて自動コンパイル

Posted: 2013.05.29 / Category: 開発環境 / Tag: 

SASSとCoffeeScriptを使いたいとき別々の処理をするのはめんどくさいですね。GuardというRubyのGemを使えばまとめて監視して自動でコンパイルしてくれるので快適になるようですよ。

Sponsored Link

環境は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できませんでした、、、

参考サイト

CoffeeScriptの環境を作ってみた – ほげほげ(仮) Ruby+guardでSass+Compass+CoffeeScriptの自動コンパイル環境を整える | Scimpr Blog