超速！gulpプラグインの作り方

こんにちはsekitakaです。

gulpを利用していると独自のgulpプラグインを作りたい場合が出てくると思います。
作り方はwriting-a-pluginに説明されています。
しかし公式の説明は丁寧な分、長いです。
そこで今回はとりあえずプラグインを作る必要がある方にむけて、最短でgulpプラグインを作る方法を紹介します。
作成するサンプルプロジェクト|GitHub

gulpプラグインテンプレート

以下のコードはファイルの内容を繰り返して出力するだけのプラグインです。
これをテンプレートにプラグイン処理本体の部分を必要に応じて編集すれば独自プラグインの完成です。

var through = require('through2');
var PluginError = require('gulp-util').PluginError;
var PLUGIN_NAME = 'プラグイン名';

module.exports = function() {
  /**
   * @this {Transform}
   */
  var transform = function(file, encoding, callback) {
    if (file.isNull()) {
      // 何もしない
      return callback(null, file);
    }

    if (file.isStream()) {
      // ストリームはサポートしない
      this.emit('error', new PluginError(PLUGIN_NAME, 'Streams not supported!'));
    }

    // プラグインの処理本体
    if (file.isBuffer()) {
      // ファイルの内容をcontentsに読み込み
      var contents = String(file.contents);

      // 同じ内容を繰り返す(サンプル)
      contents = contents + contents;

      // 編集した内容を出力
      file.contents = new Buffer(contents);

      // 処理の完了を通知
      return callback(null, file);
    }

    this.push(file);
    callback();
  };

  return through.obj(transform);
};

使い方

プラグインファイルの作成

テンプレートをコピーしてgulpfile.jsと同じ階層に、gulp-my-plugin.jsを作成します。

ちなみにnpm経由でプラグインをインストールする場合はnode_modules以下にプラグインが作成されます。
しかし独自プラグインではそこまでする必要はないでしょう。サクッとプロジェクト直下に作成します。

gulpfile.jsでの使い方

プラグインファイルがnode_modules以下に配置されないので、requireのパラメタの先頭に./を追加してモジュールを読み込みます。
その他の使い方は一般的なプラグインと同様にpipe内で関数を実行します。

JavaScript|gulpfile.js

var gulp = require('gulp');
var myPlugin = require('./gulp-my-plugin'); // 先頭に./を記述

gulp.task('default',function(){
  return gulp.src(['src/*'])
    .pipe(myPlugin()) // 独自プラグインを使用
    .pipe(gulp.dest('dist/'));
});

サンプルプロジェクト

今回使用したプロジェクトはGitHubで公開しています。自由に利用してください。
https://github.com/sekitaka/gulp-plugin-template

ストリームの非サポートについて

このサンプルでは、ストリームでの入力をサポートしていません。
しかしストリームを利用するかはタスクの登録時に自分で制御できるので問題ないでしょう。

ストリームを使用する場合は以下のようにsrc関数へのオプションを指定します。

gulp.task('default',function(){
  var options = {
    buffer:false // falseの場合はストリームを使用する(デフォルトはtrue)
  };
  return gulp.src(['src/*'],options)
    .pipe(myPlugin())
    .pipe(gulp.dest('dist/'));
});

まとめ

いかがでしたでしょうか。今回はgulpプラグインをサクッと作る方法について説明していきました。
仕組みを深く知りたい方は公式ドキュメントを読んでみるとよいと思います。