Gulp のプラグインは結構簡単に作れるので作ってみます。

例として、 JSON を AngularJS から使えるように JavaScript に変換する Gulp のプラグインを作って見ます。

インストール

gulp とプラグイン内で使うモジュールをインストールします。

$ npm install -g gulp
$ npm install -D event-stream

プラグインを作る

Gulp プラグインはファイルを受け取る Stream です。 event-stream で Stream を作って変換して次に渡します。

// json2js.js

var path = require('path');
var es = require('event-stream');

module.exports = function() {
    return es.through(function(f) {
        f.contents = new Buffer((';' + function() {
            try {
                var module = angular.module('json', []);
            } catch (e) {
                var module = angular.module('json');
            }
            module.value('$name', $value);
        }.toString() + '();').replace('$value', f.contents.toString()).replace('$name', path.parse(f.path).name));
        f.path += '.js';
        this.emit('data', f);
    });
};

使ってみる

Gulp で JSON を変換してみます。 gulpfile.js から読み込んで他のよくあるプラグインと同じように使えます。

var gulp = require('gulp');
var json2js = require('./json2js');

gulp.task('default', function() {
    return gulp.src(['src/*.json'])
        .pipe(json2js())
        .pipe(gulp.dest('dest'));
});

src の中に JSON ファイルを用意すると dest に JavaScript ができます。それを HTML から読み込むと JSON の値を Angular から使えるようになります。 a.json なら json というモジュールに a というサービスが登録されて JSON の値になります。

angular.module('app', ['json']);

angular.factory('myFactory', function(a) {
    console.log(a); // src/a.json の中身
});

さいごに

大変簡単に Gulp プラグインが作れました。

このモジュールは npm で公開すればだれでも使えるようになります。特定のプロジェクトでしか使わないなら上の例のように相対パスで require するだけです。

ちょっとだけプログラムを機械的に変換したいとき、さらっと小さいハックをできると徳が高くなる気がします。コツコツと積み重ねていきたいです。