Gruntを使ってcompassの自動ビルドを行ってみる

Gruntを使ってcompassの自動ビルドのやり方をまとめてみた。
Gruntのインストールの仕方はこちら

1. compassの初期設定をする

compass createする

srcというフォルダを作成して、src配下でcompass createする。

$ mkdir src
$ cd src
$ compass create
directory sass/
directory stylesheets/
   create config.rb
   create sass/screen.scss
   create sass/print.scss
   create sass/ie.scss
   create stylesheets/ie.css
   create stylesheets/print.css
   create stylesheets/screen.css

今回、不要なファイルは削除する。
directory stylesheets/はcssフォルダを既に作っているのフォルダごと削除。

sass/print.scss
sass/ie.scss
も削除。

sass/screen.scssはmain.scssに名前を変えておく。（別に名前はなんでもいい。）
また、main.scss内で、compass/resetだけ読み込んでおく。

注意点：便宜上、assetsというフォルダを作成して、css img js各ファイルをその中に入れた。
ファイル構成は以下。

config.rbを書き換える

2. Gruntを使って自動ビルドを行う

プラグインcompassをインストールする

$ npm install grunt-contrib-compass -save-dev

node_modulesの中にcompassが入る。

Gruntfile.js内にタスクを記述する

いざ！！

$ compass watch
Running "compass:dev" (compass) task
   create assets/css/main.css (0.041s)
Compilation took 0.045s

Done, without errors.

assets/css/main.cssが作成された。 動いているようです。

src/sass/main.scssの中身を変更して保存して、watchしてみる。

$ grunt watch
Running "watch" task
Waiting...
>> File "src/sass/main.scss" changed.
Running "compass:dev" (compass) task
overwrite assets/css/main.css (0.031s)
Compilation took 0.035s

Done, without errors.
Completed in 0.962s at Sun Jul 27 2014 15:01:33 GMT+0900 (JST) - Waiting…

watchもちゃんと動いているようです。