[Grunt & Yeoman] grunt-contrib-compass で Compass のコンパイルと監視を行う

grunt を利用して、Compass を実行する環境を作っていきます。

config.rb

compass で利用している config.rb を設定を、そのまま活かして組み込みます。

config.rb
css_dir = "src/stylesheets"
sass_dir = "src/sass"
images_dir = "src/images"
javascripts_dir = "src/javascripts"
output_style = (environment == :production) ? :compressed : :expanded
relative_assets = true
line_comments = (environment == :production) ? :false : :true
% compass init
directory src/sass/
directory src/stylesheets/
   create src/sass/screen.scss
   create src/sass/print.scss
   create src/sass/ie.scss
   create src/stylesheets/ie.css
   create src/stylesheets/print.css
   create src/stylesheets/screen.css
*********************************************************************
Congratulations! Your compass project has been created.
:
src
├── sample.html
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
├── stylesheets
│   ├── ie.css
│   ├── print.css
│   └── screen.css
└── vendor

ここまではいつも通りです。

インストール

% npm install grunt-contrib-compass --save-dev
% npm install grunt-contrib-watch --save-dev

もしくは

% npm install grunt-contrib --save-dev

Gruntfile

config.rb を読み込んで、環境設定を指定するには、こんな書き方になります。
config.rb の設定を上書きしたり、使わずに表現することもできます。

cssDir: '<%= dir.dest %>/stylesheets'

上記のように production のみコンパイルされたcssを別のディレクトリに書き出すよう、設定を追加してみます。

'use strict'
module.exports = (grunt) ->
  grunt.loadNpmTasks('grunt-contrib');
  # グラントタスクの設定
  grunt.initConfig
    # config
    dir:
      src: 'src'
      dest: 'dist'
    pkg: grunt.file.readJSON "package.json"
    compass:
      dev:
        options:
          config: 'config.rb'
          environment: 'development'
          force: true
      prod:
        options:
          config: 'config.rb'
          environment: 'production'
          force: true
          cssDir: '<%= dir.dest %>/stylesheets'
    # watchの設定
    watch:
      files: ['<%= dir.src %>/sass/*.scss']
      tasks: ['compass:dev']
  # タスクコマンドの設定
  grunt.registerTask 'default', ['compass']

監視には watch を利用します。
対象ファイルとタスクを指定します。

実行する

監視を始めます。
compass watch を始めることになりますね。

% grunt watch
Running "watch" task
Waiting...OK

ファイルを追加すると、コンパイルが完了しました。

>> File "src/sass/style.scss" added.
Running "compass:dev" (compass) task
overwrite src/stylesheets/ie.css (0.082s)
overwrite src/stylesheets/print.css (0.02s)
overwrite src/stylesheets/screen.css (0.105s)
   create src/stylesheets/style.css (0.066s)
Compilation took 0.381s
Done, without errors.
Completed in 54.906s at Wed Nov 13 2013 19:37:43 GMT+0900 (JST) - Waiting...

grunt compass すると、prod も実行されるため、dist/stylesheets/ 以下に compressed ファイルが書き出されます。

% grunt compass
Running "compass:dev" (compass) task
identical src/stylesheets/ie.css (0.063s)
identical src/stylesheets/print.css (0.001s)
identical src/stylesheets/screen.css (0.093s)
identical src/stylesheets/style.css (0.018s)
Compilation took 0.192s
Running "compass:prod" (compass) task
directory dist/stylesheets/
   create dist/stylesheets/ie.css (0.004s)
   create dist/stylesheets/print.css (0.001s)
   create dist/stylesheets/screen.css (0.028s)
   create dist/stylesheets/style.css (0.001s)
Compilation took 0.036s
Done, without errors.

だいぶ全体の動きが理解できてきました。