Grunt0.4.xでのGruntプラグインの作り方

結構前にGrunt.jsがバージョン0.4.xになりました。
・・・、マイナーバージョンアップというか実質メジャーバージョンアップというか。
かなり変わったのでプラグイン作成とGrunt自体の使い方について備忘録までに。

かなり大きな変更として、Grunt.js本体とCUIインタフェースが分離されました。
CUIインタフェースをグローバルインストールし、Grunt.js本体はプロジェクト毎にローカルインストールする方針らしいです。
ということで、まずはCUIインターフェイスをグローバルインストールします。

npm install -g grunt-cli

次にプロジェクトディレクトリに入ってからGruntをローカルインストールします。

npm install grunt

そしてGruntファイル書くだけですね。
ただ、デフォルト名が前までのgrunt.jsではなくGruntfile.jsに変わりました。
Windows環境だとgruntよりgrunt.jsが優先されるため、grunt.cmd打たないといけないからでしょうね。
http://qiita.com/items/a96b3812e93c0a3c7ae0

そして一番の変更点として、今まで標準で入ってたconcatやらwatchやらが全部外部モジュール化されました。
(例えばgrunt-contrib-concatとかgrunt-contrib-watcjとか)
なので、Gruntファイル内でconcatが使いたい場合は

grunt.loadNpmTasks('grunt-contrib-concat')  

する必要があります。
もちろんgrunt-contrib-concatはnpmでローカルインストールしておく必要があります。
grunt-contrib-xxx系のインストールをするのはめんどいので、package.jsonに書いておくと楽です。
package.jsonのdevDependenciesに依存npmモジュール名を書いておくと、プロジェクトディレクトリで

npm install

すると、勝手に依存モジュールをインストールしてくれます。便利！

それ以外のGruntファイルの書き方はバージョン0.3の時と大体一緒です。 Grunt自体のわかりやすい解説はこちらにまとまってます。

さて本題。
Gruntプラグインの作り方については日本語情報さっぱりなんですよねー。
英語なら、公式ドキュメントが0.4から頑張りだしてるので、英語読める方はそちらで。

手前味噌ですが、Gruntプラグイン「grunt-encase」を作ってみたりしたので、
以下の説明はコードを追いながら見ていただくとわかりやすいかもしれません。

さて、本来grunt-initとかでgruntpluginようテンプレートを自動生成できるらしいんですが、Windows環境だとうまくいかない。
基本的にはGrunt0.3の時と同じで、Gruntファイルに

grunt.loadTasks('tasks')  

を書いて、tasksディレクトリにタスクを書くだけ。
(いや、tasksじゃなくても好きな名前でいいんだけども。)

タスクファイル内では以下の様に書きます。

module.exports = function (grunt) { };  

あとはGruntが呼んでくれて、gruntオブジェクトを渡してくれるわけです。

grunt.registerMultiTask('task名', 'taskの説明', function() {
    // taskの処理
})

でタスクを登録すれば出来上がり。
な、ワケですが。
前述の通り、concatとかがgrunt-contrib-concatモジュールに分離されました。
0.3だとgrunt組み込みだったので、grunt.helperからconcatをプラグイン内で使えたんですよね・・。
0.4からgrunt.helperが廃止されたようで、concatとか自前で作るしかないのかなー・・。

ちなみに、作ったGruntプラグインを公開するのなら、package.jsonのkeywordsに"gruntplugin"を加えて公開するだけです。

npm publish

ただ、公開するのであれば、最低限テストくらいは書いておいたほうがいいかもですね。

grunt.loadNpmTasks('grunt-contrib-nodeunit')  

でnodeunitが使えます。

grunt nodeunit

で動くので、package.jsonで以下のように書いておくと便利です。

"scripts": { "test": "grunt nodeunit" }  

これで、

npm test

でテストが実行されるようになります。
あとはjshintとかも付けておくと良いかもですね。

grunt.loadNpmTasks('grunt-contrib-jshint')

あとはGruntファイルにjshint用のタスクを書けばOK。

grunt jshint

で動きます。
JSHintや、オプションについては本家サイトをご参照ください。

watchとかjshintとかconcat、minifyを簡単に自分のコードに適用できるので、Gruntは便利ですね。