Gruntで独自タスクを定義し、独自プラグインをnpmモジュールとして作成・公開するには：Gruntで始めるWeb開発爆速自動化入門（3）（2/2 ページ）

» 2014年05月27日 18時00分公開

[中村修太，クラスメソッド]

別ファイルにGruntタスクを定義する

　前章では、いろいろなGruntタスクについて紹介しました。grunt.registerTask関数を使用してタスク内容を記述するわけですが、これだけだと、独自タスクを定義するとGruntfile.jsが大きくなってしまいます。

　せっかくなら独立したファイルにタスクを定義したいので、ここでは別ファイルにカスタムタスクを定義してみましょう。

　まずは、今回使用するGruntプロジェクトを作成します。

% mkdir /path/your/myTask
% cd /path/your/myTask
% npm init //デフォルトでpackage.jsonを作成する
% npm install grunt --save-dev

　mytaskディレクトリを作成し、そこでnpm initコマンドを使用してpackage.jsonを作成します。package.jsonファイルができたら、gruntモジュールをインストールしておきましょう。

　次に、独自タスクを定義します。myTaskディレクトリにtasksディレクトリを作成し、その中にタスクを定義するためのmytask.jsファイルを作成します。

//myTask/tasks/mytask.js
module.exports = function(grunt) {
  //タスクの定義
  grunt.registerTask('mytask', 'my local task.', function() {
    var foo = grunt.config('mytask').foo;
    grunt.log.writeln('this is my local task.');
    grunt.log.writeln('foo = ' + foo);
  });
};

myTask/tasks/mytask.js

　前章でやったように、grunt.registerTask関数を使用してタスクを定義しています。Gruntfile.jsは次のようになります。

//myTask/Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    mytask: {foo: 'bar'}
  });
  grunt.task.loadTasks("tasks");
};

myTask/Gruntfile.js

　grunt.task.loadTasks関数（grunt.loadTasksでも可）を使用して、指定したパスにあるディレクトリのファイルをロードし、Gruntで使用できるタスクとして登録します。

　では、作成したmytaskタスクをgruntで実行してみましょう。

% grunt mytask
Running "mytask" task
this is my local task.
foo = bar
Done, without errors.

　このように、ある程度複雑な処理の独自タスクは、別ファイルで定義しておいた方が管理しやすくなると思います。

Gruntで独自のプラグインモジュールを作成して公開

　前章では自作のタスクを作成して使ってみましたが、チームで作業している場合など、作成したタスクを他の人にも使ってもらいたいことがあるかと思います。そのようなときには、タスクをプラグインとして作成し、Grunt公式プラグインページで公開できます。

　Gruntプラグインとして公開するには、下記ルールを守る必要があります。

npmのモジュールとして公開すること
npmの設定ファイル（package.json）の中で、keywordsプロパティに「gruntplugin」と記述すること
registerTask（registerMultiTask）を呼ぶ処理は「tasks」ディレクトリの下に作成すること

　自作のGruntプラグインは、実際にはnpmモジュールとして公開されます。また、package.jsonに特定のキーワードを記述することで、Grunt公式プラグインページでも検索できるようになります。

　以上のようなルールを守ってnpmモジュールを作成すると、npmコマンドを使用してインストールが可能で、Gruntから呼び出せる独自のタスクを作成／公開できます。

　ここでは、そのための手順について解説します。

npmに開発者登録を行う

　npmの開発者登録画面へ行き、必要な情報を入力して開発者登録を行います。

npmで開発者登録を行う

　ユーザー名、パスワード、メールアドレスはこの後必要になるので覚えておきましょう。

コンソールでadduser

　開発者登録ができたら、コンソールでnpm adduserコマンドを実行します。

% npm adduser

　その後ユーザー名などの情報を聞かれるので、先ほどの情報を入力してください。入力が完了すると、ホームディレクトリの.npmrcディレクトリに情報が作成されてnpmを使用してモジュールを公開できるようになります。

Gruntプラグインの作成

　後はGruntモジュールを実装してnpmモジュールとして登録するだけです。次のようにサンプルプラグイン用ディレクトリを作成し、必要なファイルを用意しましょう。

% mkdir sample-grunt-plugin
% cd sample-grunt-plugin
% npm init //package.jsonの作成
% npm install grunt --save-dev

　Gruntプラグインとして登録するため、package.jsonを下記のような内容で記述します。

{
  "name": "＜プラグインの名前＞",
  "version": "0.1",
  "description": "my sample grunt plugin",
  "keywords": [
    "gruntplugin"
  ],
  "devDependencies": {
    "grunt": "~0.4.4"
  }
}

　keywordsに「gruntplugin」と指定しているのを注意してください。次に、前章と同じようにtasksディレクトリを作成し、そこへプラグインの処理内容を記述したファイルを作成します。

//sample-grunt-plugin/tasks/myplugin.js
module.exports = function(grunt) {
  grunt.registerMultiTask('myplugin', 'sample plugin task.', function() {
      //write your plugin task code!
  });
};

sample-grunt-plugin/tasks/myplugin.js