乐胖代购免代理版

Gulp v4になってv3の書き方だとエラーになるケースがあったので移行したときのメモ

gulp.series と gulp.parallel

gulp v4で追加されたメソッド

added gulp.series and gulp.parallel methods for composing tasks. Everything must use these now.

gulp.series(...tasks) ... 引数のタスクを順番に処理をする APIドキュメント
gulp.parallel(...tasks) ... 引数のタスクを並列に処理をする APIドキュメント

gulp v3まではrun-sequenceで処理の順番を作っていた部分をgulp.seriesとgulp.parallelを使って書き換えることができます。

run-sequenceを使ってたとき

gulp.task('build', function(cb) {
  runSequence(['pug', 'css', 'js'], 'server', cb);
});

👇gulp v4な書き方

gulp.task('build', gulp.series(
  gulp.parallel('pug', 'css', 'js'),
  'server'
));

処理の順番が複雑になるとrun-sequenceの方が見通しが良いように思いますが、モジュールをインストールしなくて済む分、hugeになるnode_moduleのサイズが少し小さくなくなるかもです。(gulp4になってその分サイズが大きくなってる可能性もありそうなので...)

gulp.series, gulp.parallelで実際に実行されるタスクはgulp.task()ではなく、通常の関数形式でも問題ないようです。

var task = function(done) {
  // TASK
  done();
};
gulp.task('build', gulp.series( task ));

この場合は実行される関数名を'や"で囲ってgulp.series("task")のようにすると動作しませんでした。
また、ただの関数なので、コマンドラインから

$ gulp task

のように直接関数を実行することはできません。

gulp.task

gulp.taskの第二引数の依存タスクが廃止されたようです

v3: gulp.task(name [, deps] [, fn])
v4: gulp.task([name,] fn)

gulpjs/gulp API - gulp.task

gulp v3の次のようなのクリプトはgulp v4で実行するとエラーになってしまいます。

gulp.task('default', ['server'], function() {
  // task
});

👇gulp v4な書き方

gulp.task('default', gulp.series( 'server', function() {
  // task
} ));

nameが必須ではなくなっているので、次のような書き方もできるみたいです

gulp.task(function mytask(done) {
  // task
  done();
});

gulp.watch

gulp.watchでのタスクの指定方法が変更になっていました

v3: gulp.watch(glob [, opts], tasks)
v4: gulp.watch(globs [, opts] [, fn])

gulpjs/gulp API - gulp.watch

gulp v3では配列でタスク名を指定していたのを、v4では関数で指定します。

gulp.watch(['*.js'], ['task']);

👇gulp v4

gulp.watch(['*.js'], gulp.task('task'));
// or
gulp.watch(['*.js'], gulp.series('task'));
// or
gulp.watch(['*.js'], gulp.parallel('task'));
// or
gulp.watch(['*.js'], function() {
  // task
});

gulp v3 から gulp v4 に移行する際は、とりあえずgulp.taskとgulp.watchの書き方を見直せば問題なく移行できるのかなと思いました。
babelとかを利用する場合はES2015的なgulpfileの書き方もできるようです。
参考: https://github.com/gulpjs/gulp/tree/4.0

　
技術情報のアップデートが出来てなくて今更ながらgulp4について調べてたら、「gulpはもう辛い。これからはnpm-script」とか言われてたみたいで情報交換が難しいちほーの端っこで個人で仕事やってると能動的に情報取りに行って置いていかれないようにしてないとあっという間に追いつけてない間に更に色々進んでしまうのは辛み。
情報のキャッチアップは社内勉強会があるような会社組織の中の方に身を置いてた時の方が断然良かったな〜って実感しました。

[参考]