Grunt でCSSの監視・圧縮, Compassを使ったSass(SCSS)の監視・コンパイル・圧縮を自動化してみた

備忘録です．
最近，SassやCompassを使っててコンパイルしたりなんだりの実行がだるいので，
昔先輩にオススメしてもらったまま放置してたGruntを試してみることにしました．
今回はCSSの監視と圧縮を行い，簡単な動作確認をします．
また，Compassを使用して記述したSass(SCSS)の監視とコンパイル・圧縮も行います．
Node.jsはすでに導入しているものと仮定しています．

環境

• MacOSX (10.9)
• Node.js (v0.10.29)
• npm (1.4.14)

Grunt のインストール

Grunt のインストールは，ターミナル上でnpmを使って行います．
まず，GruntのCommand Line Interfaceをインストールします．
sudo npm install -g grunt-cli

次に，作業用ディレクトリに移動しpackage.jsonをnpm initで作成します．
npm initを実行するとname や versionについて対話形式で入力が促されるので，
表示に従って入力をしていきます．

続いて，Gruntを下記のコマンドでインストールします．
また，CSSの圧縮と監視を行うためにプラグインであるcssminとwatchもインストールしています．
sudo npm install grunt grunt-contrib-cssmin grunt-contrib-watch --save-dev

ここまでの作業が終わると下記のようなpackage.jsonが作成されます．
また，node_modules以下にgruntディレクトリなどが作成されます．

package.json

{
  "name": "gruntTest",
  "version": "0.0.0",
  "description": "grunt test",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "scarleteve",
  "license": "BSD",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

CSSの監視と圧縮

Gruntでは，Gruntfile.jsに書かれたタスクが実行されます．
今回はCSSの監視と圧縮を行いたいので，下記のようなGruntfile.jsを作成しました．

Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      minify: {
        files: {
          'css/style.min.css':'css/style.css'
        }
      }
    },
    watch: {
      files: ['css/style.css'],
      tasks: ['cssmin']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

使用するプラグインはgrunt.loadNpmTasks(hogehoge)といったように読み込みます．

実行するタスクはgrunt.initConfig の中に書いていきます．
このGruntfile.jsでは，
watch(監視)のターゲットにcss/style.cssを選択，
ターゲットに何らかの変化があったらcssminというタスクを実行します．
cssmin(圧縮)では，css/style.css を圧縮し，
css/style.min.cssとして結果を保存します．

Gruntの実行はターミナルで，grunt watchと入力して行います．

grunt.loadNpmTasks('grunt-contrib-watch'); の下の行に，
grunt.registerTask('default', 'watch'); と追記することで，
単にgruntだけで同じことが可能です．

Compassを使用したSass(SCSS)の監視とCSSへの変換・圧縮

CSSの時と同様にCompassのプラグインをインストールしていきます．
sudo npm install grunt-contrib-compass --save-dev

また，Gruntfile.jsにsassディレクトリ以下の.scssファイルをコンパイルするタスクを以下の様に追記します．
今回の様にCompassを使用したSass(Scss) のコンパイルにはCompassの設定ファイル(Config.rb)が必要になります．
こちら(MacOSX(10.9) + Sublime Text 3 + Compass 環境を作る)を参考にして用意してください．

Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      minify: {
        files: {
          'css/style.min.css':'css/style.css'
        }
      }
    },
    compass: {
      compile: {
        options: {
          config: 'config.rb'
        }
      }
    },
    watch: {
      css: {
        files: ['css/style.css'],
        tasks: ['cssmin']
      },
      scss: {
        files: ['sass/style.scss'],
        tasks: ['compass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
};

watch(監視)のターゲットにsass/style.scssを追加しています．
ターゲットに何らかの変化があった時，compassというタスクが実行されます．
compassでは，Config.rbにしたがってstyle.scss→style.cssのコンパイルを行います．
この時，style.cssに変化が生じた場合のタスク実行の流れはすでに説明したとおりです．

実行方法はCSSの時と同様です．

ひとこと

GruntのイノシシがMHシリーズのブルファンゴフェイクにしか見えない．Gruntおじさんって呼ぶことにしよ．