gulpのpipeで独自のファンクションを実行する
gulp
のpipe
の中で独自に定義したファンクションを実行し、src
で指定した各ファイルの内容を変更したい場合、through2
というモジュールを使用すれば実現できます。
highlight.jsをローカルで実行してハイライトされたファイルを出力で紹介したような処理を、pipe
の処理の中に組み込むための実装例を紹介します。
through2
through2
を使用すれば、pipe
の処理の中で、独自のファンクションを組み込むすることができます。
$ npm install --save-dev through2
以下のようにタスクを定義します。
var through = require('through2');
var path = require('path');
gulp.task('highlight', function(){
return gulp.src('対象のファイル')
.pipe(through.obj(function (file, enc, cb) {
//このファンクションで独自にファイルの内容を変更できます
//拡張子を取得(ハイライトする言語タイプは拡張子に合わせる)
var type = path.extname(file.path).replace('.', '');
//file.contents = ファイルの内容
//new Buffer()をしないとエラーになる
file.contents = new Buffer(hljs.highlight(type, file.contents.toString()).value);
cb(null, file);
}))
.pipe(gulp.dest('出力先'));
});
ファンクションを別ファイルに定義
ファンクションをタスクの中に記述すると1つのタスクがとても長くなってしまい、可読性が悪くなってくるので、ファンクションは別ファイルで管理したくなることがあると思います。以下のようにすれば、メインのgulp
ファイルと、ファンクションのファイルを分けて定義することができます。
func.js
//ファンクションを定義します
exports.highlight = function(file){ //必要な情報を引数で渡すようにします
var type = path.extname(file.path).replace('.', '');
return hljs.highlight(type, file.contents.toString()).value; //編集したファイルの内容を帰します
};
gulpfile.js
var through = require('through2');
var func = require('func.js'); //定義したファイルを参照します
gulp.task('highlight', function(){
return gulp.src('対象のファイル')
.pipe(through.obj(function (file, enc, cb) {
//別ファイルに定義したファンクションを呼び出します
file.contents = new Buffer(func.highlight(file));
cb(null, file);
}))
.pipe(gulp.dest('出力先'));
});
stream
などの細かい仕組みはまだよくわかっていませんが、pipe
の処理の中で独自のファンクションを実行できるので、through2
を使えばプラグインが用意されていなくても、いろいろとできることが増えると思います。