[Grunt & Yeoman] Grunt の plugin をロードする5つの方法
プラグインのロードについて、時間を計測してみました。
jit-grunt が速いです。
[markdown]
## 計測方法
* time-grunt と time コマンド(※)を使って計測した。
* いずれも2回目以降の実行結果。
* System 80% 以上のものを掲載(jit-grunt を除く)。
“`prettyprinted
% time grunt build
“`
※ 4つめの load-grunt-tasks を利用したところ、loading tasks が表示されなかったため、time コマンドを併用しました。
## grunt.loadNpmTasks
公式に記載されていた方法。
必要なプラグインを明記するので、何を利用しているか分かりやすい。
### Gruntfile
“`
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
“`
> * [はじめに | Grunt 日本語リファレンス | js STUDIO](http://js.studio-kingdom.com/grunt/doc/getting_started)
ただ、下記のようにインストールすると、package.json にバージョンも含めて管理されることが分かったので、簡潔に書きたくなりました。
“`prettyprinted
npm install grunt –save-dev
“`
### 実行結果
12.826 s
“`prettyprinted
Execution Time (2014-01-09 05:48:20 UTC)
loading tasks 3.2s ▇▇▇▇▇▇▇▇▇▇▇▇▇ 27%
ejs:dev 594ms ▇▇▇ 5%
compass:dev 915ms ▇▇▇▇ 8%
styleguide:prod 2.3s ▇▇▇▇▇▇▇▇▇ 20%
yuidoc:prod 1.3s ▇▇▇▇▇▇ 11%
copy:dev 120ms ▇ 1%
cssmin:prod 241ms ▇ 2%
uglify:prod 2.4s ▇▇▇▇▇▇▇▇▇▇ 21%
imagemin:prod 403ms ▇▇ 3%
Total 11.6s
grunt build 9.67s user 1.22s system 84% cpu 12.826 total
“`
## package.json を読み込んで for 文でまわす
このあたりで試行錯誤していたときに、どなたかのエントリで見かけた方法。
ソースを失念してしまいました。すみません。
> * [Grunt: タスクランナーで自動化する | deadwood](https://www.d-wood.com/blog/2013/11/07_4989.html)
### Gruntfile
“`
var pkg = grunt.file.readJSON(‘package.json’);
var taskName;
for(taskName in pkg.devDependencies) {
if(taskName.substring(0, 6) == ‘grunt-‘) {
grunt.loadNpmTasks(taskName);
}
}
“`
.coffee で書いてみました。
“`
pkg = grunt.file.readJSON ‘package.json’
for taskName of pkg.devDependencies when taskName.substring(0, 6) is ‘grunt-‘
grunt.loadNpmTasks taskName
“`
`grunt-contrib` でプラグインをたくさんインストールした際に、重くなった気がしたので、他の方法を模索しました。
### 実行結果
12.248 s
“`prettyprinted
Execution Time (2014-01-09 05:44:34 UTC)
loading tasks 3.2s ▇▇▇▇▇▇▇▇▇▇▇▇▇ 27%
ejs:dev 597ms ▇▇▇ 5%
compass:dev 677ms ▇▇▇ 6%
styleguide:prod 2.4s ▇▇▇▇▇▇▇▇▇▇ 20%
yuidoc:prod 1.5s ▇▇▇▇▇▇ 13%
concat:js 129ms ▇ 1%
cssmin:prod 256ms ▇ 2%
uglify:prod 2.4s ▇▇▇▇▇▇▇▇▇▇ 21%
imagemin:prod 428ms ▇▇ 4%
Total 11.7s
grunt build 9.64s user 1.22s system 88% cpu 12.248 total
“`
## matchdep プラグイン
matchdep というプラグインを使う方法。
> * [Grunt: Gruntfile をもう少し | deadwood](https://www.d-wood.com/blog/2013/11/09_5001.html)
### Gruntfile
“`
require(‘matchdep’).filterDev(‘grunt-*’).forEach(grunt.loadNpmTasks)
“`
> * [matchdepを使ってGrunt.jsのプラグインを自動ロードする](http://nantokaworks.com/p955/)
> * [オリジナルビルド環境をGrunt 0.4.xへ移行｜Blog｜Skyward Design](http://www.skyward-design.net/blog/archives/000159.html)
### 実行結果
13.062 s
“`prettyprinted
Execution Time (2014-01-09 05:53:22 UTC)
loading tasks 3.6s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 31%
ejs:dev 575ms ▇▇▇ 5%
compass:dev 790ms ▇▇▇▇ 7%
styleguide:prod 2.1s ▇▇▇▇▇▇▇▇▇ 18%
yuidoc:prod 1.3s ▇▇▇▇▇ 11%
copy:dev 120ms ▇ 1%
cssmin:prod 239ms ▇ 2%
uglify:prod 2.5s ▇▇▇▇▇▇▇▇▇▇ 21%
imagemin:prod 376ms ▇▇ 3%
Total 11.7s
grunt build 9.78s user 1.24s system 84% cpu 13.062 total
“`
## load-grunt-tasks プラグイン
yoman で使われていた load-grunt-tasks プラグインを使う方法。
> * [sindresorhus/load-grunt-tasks](https://github.com/sindresorhus/load-grunt-tasks)
> * [プラグイン毎にgrunt.loadNpmTasks()を追加する必要が無くなるload-grunt-tasksを紹介するよ – Qiita [キータ]](http://qiita.com/makotot/items/b932c3e6a6196d7c0dc2)
### インストール
“`prettyprinted
% npm install –save-dev load-grunt-tasks
“`
### Gruntfile
`grunt.initConfig` の前に、下記を追加する。
“`
require(“load-grunt-tasks”)(grunt)
“`
### 実行結果
12.936 s
“`prettyprinted
Execution Time (2014-01-09 05:50:18 UTC)
ejs:dev 694ms ▇▇▇▇ 8%
compass:dev 731ms ▇▇▇▇ 8%
styleguide:prod 2.3s ▇▇▇▇▇▇▇▇▇▇▇▇ 26%
yuidoc:prod 1.5s ▇▇▇▇▇▇▇▇ 16%
cssmin:prod 387ms ▇▇ 4%
uglify:prod 2.5s ▇▇▇▇▇▇▇▇▇▇▇▇▇ 28%
imagemin:prod 706ms ▇▇▇▇ 8%
Total 9s
grunt build 9.79s user 1.23s system 85% cpu 12.936 total
“`
## jit-grunt プラグイン
jit-grunt というプラグインを使う方法。
> * [shootaroo/jit-grunt](https://github.com/shootaroo/jit-grunt)
> * [Gruntのtaskの実行にかかる時間を劇的に短縮する方法の記述をシンプルにするjit-grunt – Qiita [キータ]](http://qiita.com/makotot/items/edee3bcd4149fbd04086)
### インストール
“`prettyprinted
% npm install jit-grunt –save-dev
“`
### Gruntfile
`grunt.initConfig` の前に、下記を追加する。
“`
require(‘jit-grunt’)(grunt)
“`
task name を使って、自動でプラグインを探し出します。
探せないものは、下記のようなエラーが表示されます。
“`prettyprinted
% time grunt build
Loading grunt-contrib-compass plugin…OK
:
Loading grunt-contrib-compress plugin…OK
Warning: Task “ejs” not found. Use –force to continue.
Aborted due to warnings.
“`
名前にハイフンを含むようなルール外のプラグインは、手動でマッピングします。
“`
require(‘jit-grunt’)(grunt, {
bower: ‘grunt-bower-task’,
ejs: ‘grunt-simple-ejs’
})
“`
### 実行結果
8.347 s (system 105%)
“`prettyprinted
Execution Time (2014-01-09 06:45:36 UTC)
loading tasks 145ms ▇ 2%
build 1.1s ▇▇▇▇▇▇▇ 14%
ejs:dev 472ms ▇▇▇ 6%
compass:dev 584ms ▇▇▇▇ 8%
styleguide:prod 2.1s ▇▇▇▇▇▇▇▇▇▇▇▇▇ 28%
yuidoc:prod 374ms ▇▇▇ 5%
uglify:prod 2.5s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 33%
imagemin:prod 170ms ▇ 2%
Total 7.7s
grunt build 7.82s user 0.96s system 105% cpu 8.347 total
“`
[/markdown]