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への追記無しで全て自動でロードされるようになります。