[Grunt & Yeoman] Grunt の plugin をロードする5つの方法
プラグインのロードについて、時間を計測してみました。
jit-grunt が速いです。
Contents
計測方法
- time-grunt と time コマンド(※)を使って計測した。
- いずれも2回目以降の実行結果。
- System 80% 以上のものを掲載(jit-grunt を除く)。
% time grunt build
※ 4つめの load-grunt-tasks を利用したところ、loading tasks が表示されなかったため、time コマンドを併用しました。
grunt.loadNpmTasks
公式に記載されていた方法。
必要なプラグインを明記するので、何を利用しているか分かりやすい。
Gruntfile
grunt.loadNpmTasks('grunt-contrib-uglify');
- はじめに | Grunt 日本語リファレンス | js STUDIO
ただ、下記のようにインストールすると、package.json にバージョンも含めて管理されることが分かったので、簡潔に書きたくなりました。
npm install grunt --save-dev
実行結果
12.826 s
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 文でまわす
このあたりで試行錯誤していたときに、どなたかのエントリで見かけた方法。
ソースを失念してしまいました。すみません。
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
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 というプラグインを使う方法。
Gruntfile
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks)
実行結果
13.062 s
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 プラグインを使う方法。
インストール
% npm install --save-dev load-grunt-tasks
Gruntfile
grunt.initConfig の前に、下記を追加する。
require("load-grunt-tasks")(grunt)
実行結果
12.936 s
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 というプラグインを使う方法。
インストール
% npm install jit-grunt --save-dev
Gruntfile
grunt.initConfig の前に、下記を追加する。
require('jit-grunt')(grunt)
task name を使って、自動でプラグインを探し出します。
探せないものは、下記のようなエラーが表示されます。
% 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%)
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