GruntでCoffee Scriptのコンパイル&Uglifyで圧縮

Gruntとは

弊社ブログでもすでに紹介していますが、Gruntとはnode.jsベースで作成されたビルドツールです。
最近v0.4がリリースされ、Coffee Scriptがデフォルトでサポートされました。
今回は、変更が検知されたCoffeeScriptファイルをコンパイル→UglifyJSで圧縮　という処理をGruntでやってみます。

環境構築方法

今回使用した動作環境は以下のとおりです。

• OS : MacOS X 10.7.4
• Node.js : v0.10.0
• npm : 1.2.14
• Grunt : 0.4

npmを使用してGruntをインストールしておきましょう。

% npm install -g grunt-cli

package.jsonとGruntfileを作成する

Grunt(0.4)を実行するためには、２つのファイルが必要です。
まずはpackage.jsonを作成しましょう。npmを使えば簡単に作成できます。
依存モジュールの定義をしておけるので、package.jsonを用意しておけば、他のユーザーが
npm installするだけでモジュールのインストールができます。

% mkdir grunt-sample
% cd grunt-sample
% npm init

package.jsonを作成したら、gruntモジュールのインストールをしておきましょう。
--save-devオプションをつけると、package.jsonにそのモジュールが追加されます。

% npm install grunt --save-dev
% npm install grunt-coffee -save-dev
% npm install grunt-contrib-uglify -save-dev
% npm install grunt-contrib-watch -save-dev

grunt-sampleディレクトリに必要なディレクトリとファイルを作成しましょう。
coffee scriptのファイルを置くディレクトリ、コンパイルしたjsファイルを置くディレクトリ、
uglifyjsで圧縮したファイルを置くディレクトリを作成します。

% mkdir coffee
% mkdir js
% mkdir compress

そして、Gruntの動作を定義する、Gruntfile.coffeeを作成します。
watchタスクでcoffeescriptファイルの変更を検知し、コンパイルと圧縮を行います。

module.exports = (grunt) ->
  pkg = grunt.file.readJSON 'package.json'
  grunt.initConfig
    watch:
      files: ['coffee/**/*.coffee'],
      tasks: ['coffee','uglify']

    coffee:
      compile:
        options:
          sourceMap: true
        files: [
            expand: true,
            cwd: 'coffee/',
            src: ['**/*.coffee'],
            dest: 'js/',
            ext: '.js'
        ]
    uglify:
      compress_target:
        options:
          sourceMap: (fileName) ->
            fileName.replace /\.js$/, '.js.map'
        files: [
            expand: true,
            cwd: 'js/',
            src: ['**/*.js'],
            dest: 'compress/',
            ext: '.js'
        ]

  grunt.loadNpmTasks 'grunt-contrib-coffee'
  grunt.loadNpmTasks 'grunt-contrib-watch'
  grunt.loadNpmTasks 'grunt-contrib-uglify'

coffeeディレクトリに適当なcoffee scriptファイルを作成し、保存してみてください。
コンパイルされ、圧縮されたファイルがcompressディレクトリに生成されます。

#coffee/foo.coffeeに作成したcoffee scriptファイル
sum = (array) ->
  result = 0;
  for i in array
    result += i
  result

array = new Array(1,2,3)
console.log "result=", sum(array)

まとめ

Gruntを使うと、いろいろな作業が自動化できてとても楽ですね。
面倒な作業な作業はすべて自動化して楽しましょう。

参考サイトなど

• 公式サイト: http://gruntjs.com/