gulpのpipeで独自のファンクションを実行する

gulppipeの中で独自に定義したファンクションを実行し、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を使えばプラグインが用意されていなくても、いろいろとできることが増えると思います。


関連記事

  • watchifyとgulpで自動コンパイルと差分更新をおこなう

    vuejsの開発環境を構築するでvueをビルドする環境を作成しました。今回は開発環境をさらに便利にするために、ファイルが変更されたら自動でビルドを実行し、ブラウザをリロードする処理を実装します。開発用...


  • swig|htmlのヘッダ・フッタの共通化などで実装を効率化する

    swigでhtmlの実装すれば、htmlのヘッダーやフッターの共通化などができ、htmlの管理・実装の効率が格段に上がります。swigとは、テンプレートエンジンの1つで、htmlの中に変数やif文やf...


  • 拡張メタ言語を使用して静的ホームページを簡単に作成する

    ちょっとしたホームページやブログを作成するとき、どのように作成しているでしょうか?最初はhtmlやcssをそのままテキストエディタなどで書いて作成していたが、ページ数が多くなるにつれ管理が大変になり、...


  • テンプレートエンジンのnunjucksとhighlight.js組み合わせる

    便利なテンプレートエンジンのnunjucksのテンプレートの中で、コードをシンタックスハイライト(色付け)する便利なライブラリのhighlight.jsを組み込む方法を紹介します。nunjucksのコ...


  • Nunjucksで独自のファンクションを実行する

    Nunjucksのテンプレートファイルに独自に定義した別ファイルのファンクションを実行する方法を紹介します。gulpでコンパイルする場合を想定しています。gulp-nunjucks-renderでNu...


  • Nunjucksの基本的な使い方 -extends,block,include-

    htmlのおすすめテンプレートエンジンNunjucksがとても便利なのですが、日本語のページがほとんど見当たらなかったので、基本的な使い方を紹介します。ホームページを作成していると、htmlのヘッダと...


  • npmのpackage.jsonを最新のバージョンに更新する

    package.jsonのパッケージを最新のバージョンに更新する方法を紹介します。npmは以下のコマンドを実行すれば、package.jsonに記載されているバージョンに更新されます。最新のバージョン...


  • less|cssに変数を使い実装を効率化する方法

    ホームページを作っていて、規模が大きくなっていくにつれ、気をつけていてもcssのソースはグチャグチャになってしまい、後で見返したときに「これはどこのスタイルだっけ?」となってしまうことがあると思います...


  • gulpの便利なタスク gulpfile.jsの記述例

    gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulpの便利なタスクの実装例を紹介します。less,js,htmlのコンパイルや軽量化、watchとlivereload、エラー時...


  • gulp|watchやlivereloadのタスクを停止する方法

    gulpでwatchやlivereloadを停止したい場合、ctrl+Cで停止することができますが、sublime textやatomのプラグインからwatchなどを起動した場合、ctrl+Cで停止す...