連載

2014年5月27日

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

JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツール（Grunt、Yeoman、Bowerなど）などを紹介していく連載。今回は、既存のプラグインを使用せず、独自タスクを定義したり、独自プラグインを作成してnpmモジュールとして公開したりする方法を紹介します。

[中村修太，クラスメソッド] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

別ファイルに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」を紹介する予定です。お楽しみに。

「Gruntで始めるWeb開発爆速自動化入門」バックナンバー

著者プロフィール

中村修太（なかむらしゅうた）

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