matchdepを使ってGrunt.jsのプラグインを自動ロードする

Gruntが0.4系になってGruntのプラグインが細分化されました。
名称が grunt-xxx となるものが非常に多くなりましたね。

また、細分化された分 Gruntfile.js でロードするプラグインの数が多くなっています。

packege.json にこのような記述があったとしましょう。


{
  "name": "grunt-plugin-auto-load",
  "version": "0.1.0",
  "Dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-connect": "~0.1.2",
    "grunt-contrib-livereload": "~0.1.1",
    "grunt-regarde": "~0.1.1"
  }
}

3つ Gruntのプラグインをダウンロードして使っている状態です。


module.exports = function (grunt) {
  grunt.initConfig({
    
    xxx: xxx
 
    //......
  });
 
  grunt.loadNpmTasks('grunt-regarde');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-livereload');
 
  //......
};

grunt-contrib-compass を新たに追加する場合、grunt-contrib-compass をダウンロードして


$ npm install grunt-contrib-compass --save-dev

Gruntfile.jsに grunt-contrib-compass をロードする記述をします。


  grunt.loadNpmTasks('grunt-regarde');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-livereload');
  grunt.loadNpmTasks('grunt-contrib-compass');	//追加

package.jsonで使うことを前提でダウンロードしているのに、loadTasks(grunt-xxx)の記述が煩雑になりがちです。
改めて明示的にGruntfile.jsに記述するのは面倒だなと思っていました。

そこで今回使いたいのは matchdep です。

matchdep はパッケージ(Webサイト、アプリ、npmモジュールなど)の開発時(Gruntでのみ)使用するものなので --save-dev オプションを使用してインストールします。
※パッケージ内でインストールする Node Modules はインストール済みプラグインの把握、環境の引き継ぎのため packege.jsonに記述する(される)ようにしましょう


$ npm install matchdep --save-dev

{
  "name": "grunt-plugin-auto-load",
  "version": "0.1.0",
  "Dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-connect": "~0.1.2",
    "grunt-contrib-livereload": "~0.1.1",
    "grunt-regarde": "~0.1.1",
    "grunt-contrib-compass": "0.1.1rc8",
    "matchdep": "~0.1.1"
  }
}

matchdepの項目が追加されました。

次にGruntfile.jsにGruntPluginを自動でLoadするように変更します。
Yeoman の WebApp generator で記述されていた方法を参考にしました。


module.exports = function (grunt) {
  grunt.initConfig({
    
    xxx: xxx
 
    //......
  });
 
 	// grunt-* とつく Plugin をすべて呼び出す記述を追加
    // load all grunt-plugin tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
 
    // grunt-xxx Plugi単体の呼び出しをコメントアウト
    //grunt.loadNpmTasks('grunt-regarde');
    //grunt.loadNpmTasks('grunt-contrib-connect');
    //grunt.loadNpmTasks('grunt-contrib-livereload');
    //grunt.loadNpmTasks('grunt-contrib-compass');
 
  //......
};

これで node_modules にダウンロードしている gruntのプラグイン(grunt-xxx)はGruntfile.jsへの追記無しで全て自動でロードされるようになります。