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

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

[中村修太,クラスメソッド]
前のページへ 1|2       

別ファイルに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

Gruntプラグインの公開

 必要なファイルが作成できたら、npm publishコマンドでプラグインを登録します。

% npm publish

 登録が完了してしばらくすると、Grunt公式プラグインのページでも検索結果で表示されるようになります。

 また、「npm install」コマンドでプラグインをインストールできるようになります。インストールした後は、grunt.loadNpmTasks関数を使ってプラグインをロードし、タスクを実行できるようになります。

公式ドキュメントもある

 なお、Gruntプラグインの作成については、公式ドキュメントの「Creating plugins」もご確認ください。

次回はYeomanの紹介

 さて、今回はGruntでいろいろなタスクを定義する方法と、独自のGruntプラグインを作成、公開する方法を紹介しました。便利なプラグインを作成した際には、npmで公開することも考えてみてはいかがでしょうか。

 次回はGruntを抱合しており、開発ワークフローを提供してくれるツール、「Yeoman」を紹介する予定です。お楽しみに。

著者プロフィール

中村修太

中村修太(なかむら しゅうた)

クラスメソッド勤務の新しもの好きプログラマです。昨年、東京から山口県に引っ越し、現在はノマドワーカーとして働いています。好きなJazzを聴きながらプログラミングするのが大好きです。


前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。