gulp.registryを使ってタスクの分割をしよう

今までgulpタスクの分割はread-dirとかを使用してやっていた方も多いと思います。(僕は分割していませんでした)

gulp4.0ではgulp.registoryとundertaker-registryというものでカスタムタスクの登録ができるようになっていたので、とりあえずタスクをファイルごとに分割してみました。

gulp4.0についての記事はこちらが参考になります。
gulp4.0 migration guide

※ gulp4.0とes6を実行できる環境を作ってください。今回はその説明は割愛します。

タスク分割の流れ

1: タスクを書く

gulpとundertaker-registryを読み込んで、タスクを次のように書きましょう。

今回は面倒なのでタスクを書いていないのですが、console.log()の部分にgulpのタスクを書けば大丈夫そうです。

TestTask.js

import gulp from 'gulp';
import Registry from 'undertaker-registry';

class TestTask extends Registry {

  init() {

    gulp.task('test', callback => {
      return console.log('やったぜ。');
    });

  }

};

module.exports = new TestTask();

ファイルごとにgulpプラグインを個別importする必要があるので、各タスクに使用しているプラグインを把握しやすくなります。

2: 読み込む

gulpfile.babel.js

import gulp from 'gulp'
import TestTask from 'TestTask.js'

// カスタムタスクを登録
gulp.registry(TestTask);

gulp.task('default', gulp.series('test'));

3: 試す

$ gulp
> gulp-setting-for-myself@1.0.0 start /Users/nyawach/Documents/private/websites/gulp-setting
> gulp

[22:12:19] Requiring external module babel-register
[22:12:19] Using gulpfile ~/Documents/private/websites/gulp-setting/gulpfile.babel.js
[22:12:19] Starting 'default'...
[22:12:19] Starting 'test'...
やったぜ。
[22:12:19] Finished 'test' after 1.06 ms
[22:12:19] Finished 'default' after 2.84 ms

やったぜ。

ちなみに、ツリー構造は以下のようになります。

$ gulp -T
[22:21:54] Requiring external module babel-register
[22:21:54] Tasks for ~/Documents/private/websites/gulp-setting/gulpfile.babel.js
[22:21:54] ├─┬ default
[22:21:54] │ └─┬ <series>
[22:21:54] │   └── test
[22:21:54] └── test

さいごに

gulp4.0から新しく追加された機能などもどんどん利用していきたいですね！