かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Gulp v4 移行メモ

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 v3まではrun-sequenceで処理の順番を作っていた部分をgulp.seriesgulp.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.taskgulp.watchの書き方を見直せば問題なく移行できるのかなと思いました。
babelとかを利用する場合はES2015的なgulpfileの書き方もできるようです。
参考: https://github.com/gulpjs/gulp/tree/4.0

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


[参考]

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門

👆amazon primeにあったので観てたけど面白かったです。
おバカなギャグがありつつ、こんなチームで仕事するの楽しそうだなーっておもいながら観てました。