GruntをCoffeeScriptで書いてcompileしてconcatしてminifyしてgzipする【2日目】

Gruntって

https://github.com/gruntjs/grunt
ビルドツールです。AntとかRakeとかCakeとかそんな感じのやつです。
grunt.jsにコンパイルなどのタスクの設定を定義して実行します。Grunt自体にもある程度のタスクは持っていますが、タスクをプラグイン的に追加できる仕組みがあるので追加タスクのプロジェクトがたくさんあります。テストやCSS周り、ブラウザ起動やGrowl等の便利系などもあり、ひと通りやりたいことはできそうです。
jQuery UIでもGrunt使ってるようですね。参考になります。

CoffeeScriptで書きたい

Gruntを動かすにはプロジェクトルートにgrunt.jsファイルを作り設定を書いて実行します。ただ、せっかくCoffeeScriptで書いているのに設定ファイルはJavaScriptで書かなくちゃいけないのが、ちょっと嫌だなと思いgrunt.jsファイルをCoffeeScriptで書いてみました。
編集するのはCoffeeScriptのビルドツールであるcakeの設定ファイルCakeFileとgrunt.coffeeです。
Cakefileでgrunt.coffeeをコンパイルしてgruntを実行する流れになります。

ファイルたち

Cakefile [Ruby] {exec, spawn} = require 'child_process'

exerr = (err, sout, serr)-> console.log err if err console.log sout if sout console.log serr if serr

exec 'coffee -j grunt.js -c grunt.coffee', exerr exec 'grunt', exerr [/Ruby]

grunt.coffeeをコンパイルしてgruntを実行しています。これは‥ シェルスクリプトやバッチファイルで書いてもいいですね。。

grunt.coffee

[Ruby] module.exports = (grunt)->

coffees = [ 'assets/coffee/public/javascripts/app.coffee' 'assets/coffee/public/javascripts/model.coffee' ]

grunt.initConfig # config dir : temp : 'temp' js : 'public/javascripts' pkg : ''

# tasks coffee: flatten: options: flatten: false bare: true files: '<%= dir.temp %>/<%= pkg.name %>.src.js': coffees min: dist: src:[ '<%= dir.temp %>/<%= pkg.name %>.src.js' ] dest: '<%= dir.temp %>/<%= pkg.name %>.min.js' separator: ';' compress: gzip: files: '<%= dir.temp %>/<%= pkg.name %>.min.gzip':'<%= dir.temp %>/<%= pkg.name %>.min.js' copy: dist: src: '<%= dir.temp %>/<%= pkg.name %>.min.gzip' dest: '<%= dir.js %>/<%= pkg.name %>.min.js'

grunt.loadNpmTasks 'grunt-contrib' grunt.loadNpmTasks 'grunt-s3' grunt.registerTask 'default', 'coffee min compress copy' [/Ruby]

設定だけ書けば良いので楽ちんです。
上の例ではCoffeeScriptをコンパイルしつつ結合し、minifyしてgzipしてコピーしています。クライアントサイドのJavaScriptをCoffeeScriptで書いて本番環境用のファイルを作る想定です。

ちょっと解説

[Ruby]grunt.initConfig[/Ruby]

設定を定義したオブジェクトを渡します。キモです。

[Ruby]grunt.loadNpmTasks 'grunt-contrib'[/Ruby]

追加タスクがある場合にパッケージ名を設定します。ちなみにgrunt-contribパッケージはCoffeeScriptなどデフォルトではないけど、使用頻度の高そうなタスクの詰め合わせセットです。

[Ruby]grunt.registerTask 'default', 'coffee min compress copy'[/Ruby]

タスクの(塊の)種類を設定しています。'default'はデフォルトのタスクです。

[Ruby]pkg : ''[/Ruby]

jsonファイルをパースしてオブジェクト化しています。

[Ruby]<%= dir.temp %>[/Ruby]

テンプレート機能です。

まとめ

わかってたことですが、Cakefileとgrunt.coffee２つ用意するのがイマイチな感はあります。ただObjectとArrayの定義しか使ってませんが、CoffeeScriptで書いたことによってJavaScriptより少しはスッキリ感があるかなとは思いました。
まだ実践投入してませんが使い方がシンプルで便利なのでプロジェクトで是非使いたいし、もっと実践的なgruntファイルを作りたいです。