gulp 4.0について

はじめに

gulpv4.0がそろそろリリースされそうなので、どんなことができるようになるのか調べてみようと思いました。

https://github.com/gulpjs/gulp/milestones/gulp%204 マイルストーンを見てみると78%くらい終わっていてあと少しという感じでしょうか

gulp 4.0を先にinstallしてみる

直接gitから落としてくれば4.0を使うことができます。

$ npm install git://github.com/gulpjs/gulp.git#4.0 --save-dev
$ npm install git://github.com/gulpjs/gulp-cli.git#4.0 –g

4.0の変更内容

機能の変更内容についてはCHANGELOGに記載されています。

大きいところでいうとmethodがいくつか追加されていてgulp.series,gulp.parallel,gulp.tree,gulp.registryなどがあります。

series/parallelについて

今までだとrunSequenceを使って行っていた並列/直列の処理が簡単に書けるようになります。

use runSequence

var gulp = require('gulp');
var runSequence = require('run-sequence');

gulp.task('build', function(callback) {
  runSequence('build-clean',
              ['build-scripts', 'build-styles'],
              'build-html',
              callback);
});

runSequenceを使っていた場合だいたいこのように使われていたと思います。

use gulp#v4.0

var gulp = require('gulp'); // gulp 4

gulp.task(
  'build',
  gulp.series(
    'build-clean',
    gulp.parallel('build-scripts', 'build-styles'),
    'build-html'
  )
);

こんな感じに書き換えることができました。パフォーマンスはどちらがよいのでしょうか。暇なときに調べて見ようと思います。

gulp.treeについて

API#gulptreeoptionsこちらに詳細が書いてありますがgulp.treeを使うと登録してあるtaskの一覧を取得することができます。

また下記のようにオプションでdeepをtrueにしておくと

gulp.tree({ deep: true })
/*output: [
   {
      "label":"one",
      "type":"task",
      "nodes":[]
   },
   {
      "label":"two",
      "type":"task",
      "nodes":[]
   },
   {
      "label":"three",
      "type":"task",
      "nodes":[]
   },
   {
      "label":"four",
      "type":"task",
      "nodes":[
          {
            "label":"<series>",
            "type":"function",
            "nodes":[
               {
                  "label":"one",
                  "type":"task",
                  "nodes":[]
               },
               {
                  "label":"two",
                  "type":"task",
                  "nodes":[]
               }
            ]
         }
      ]
   },
   {
      "label":"five",
      "type":"task",
      "nodes":[
         {
            "label":"<series>",
            "type":"function",
            "nodes":[
               {
                  "label":"four",
                  "type":"task",
                  "nodes":[
                     {
                        "label":"<series>",
                        "type":"function",
                        "nodes":[
                           {
                              "label":"one",
                              "type":"task",
                              "nodes":[]
                           },
                           {
                              "label":"two",
                              "type":"task",
                              "nodes":[]
                           }
                        ]
                     }
                  ]
               },
               {
                  "label":"<parallel>",
                  "type":"function",
                  "nodes":[
                     {
                        "label":"three",
                        "type":"task",
                        "nodes":[]
                     },
                     {
                        "label":"<anonymous>",
                        "type":"function",
                        "nodes":[]
                     }
                  ]
               }
            ]
         }
      ]
   }
]
*/

タスクとそのタスクに依存するタスクがわかるようになります。

またCLI用にも用意されていて CLI.md

$ gulp -T // or gulp --tasks
[20:58:55] Tasks for ~\exampleProject\gulpfile.js
[20:58:55] ├── one
[20:58:55] ├── two
[20:58:55] ├── three                    
[20:58:55] ├─┬ four
[20:58:55] │ └─┬ <series>
[20:58:55] │   ├── one
[20:58:55] │   └── two
[20:58:55] ├─┬ five
[20:58:55] │ └─┬ <series>
[20:58:55] │   ├─┬ four
[20:58:55] │   │ └─┬ <series>
[20:58:55] │   │   ├── one
[20:58:55] │   │   └── two
[20:58:55] │   └─┬ <parallel>
[20:58:55] │     ├── three
[20:58:55] │     └── <anonymous>

でこのように先ほど同様の依存関係がでます。

また--tasks-simpleで簡単なタスク一覧がみれます。

$ gulp --tasks-simple
one
two
three
four
five

CLIでみれるのは、あのタスクだけ回したいと思ったときに、しょっちゅうタスク名忘れてgulpfile読んでたひとからするとありがたいです。

gulp.registryについて

今までだとひとつのgulpfileが大きくなってしまって分割したくなったときに requireDirしたりgulp-load-pluginsしていたかと思います。

registryを使うと

//gulpfile.js
var gulp = require('gulp');

var companyTasks = require('./myCompanyTasksRegistry.js');

gulp.registry(companyTasks);

gulp.task('one', gulp.parallel('someCompanyTask', function(done) {
  console.log('in task one');
  done();
}));

//myCompanyTasksRegistry.js
var util = require('util');

var DefaultRegistry = require('undertaker-registry');

function MyCompanyTasksRegistry() {
  DefaultRegistry.call(this);

  this.set('clean', function(done) {
    done();
  });
  this.set('someCompanyTask', function(done) {
    console.log('performing some company task.');
    done();
  });
}
util.inherits(MyCompanyTasksRegistry, DefaultRegistry);

module.exports = new MyCompanyTasksRegistry();

registryを使って登録することによって自然?に追加できるようになりました。

まとめ

結局いつリリースになるのかわからなかったのですが4.0への更新は今まで外部のプラグイン等で補っていた機能がgulpそのもので使える感じになったくらいなのでしょうか。