[Grunt & Yeoman] Grunt の plugin をロードする5つの方法

プラグインのロードについて、時間を計測してみました。
jit-grunt が速いです。

計測方法

  • 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');
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