tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

【gulp】gulp@4.0.0にしたら`The following tasks did not complete:`、`Did you forget to signal async completion?`と怒られる

はじめに

とあることで、gulpを3.x.x.から^4.0.0にあげる必要がありました。
f:id:tweeeety:20180618044056p:plain

あげてからgulpタスクを実行すると
以下のようなエラーが出たのでその対応方法をメモ

# defaultタスクを実行するとこんなエラーが...
$ ./node_modules/gulp/bin/gulp.js
[05:35:32] Using gulpfile ~/gulp-task-gulp4.0.0-sample2/gulpfile.js
[05:35:32] Starting 'default'...
[05:35:32] Starting 'hoge'...
i am hoge!!
[05:35:32] The following tasks did not complete: default, hoge
[05:35:32] Did you forget to signal async completion?

なぜ起こったか

The following tasks did not complete  
上記の実行時のログより

処理が終わってないよと言われてます。

4.x.xではgulpタスクで以下のことを行う必要があります

  • 明示的にtaskを終了する
    • callbackを呼び出す
    • streamを返却する
    • 単にreturnをつける

どうすればいいか

すでに書いてしまってますが、
明示的にtaskを終了をする必要があります。

gulp.task@3.x.x -> gulp.task@^4.x.x
に書き換える変える一例をあげます。

gulp.task@3.x.x

gulp.task('sass', function(){
  gulp.src('./sass/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css/'));
});

gulp.task@^4.x.x

gulp.task('sass', function(){
  // streamをreturnする
  return gulp.src('./sass/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css/'));
});

3.9.1^4.x.xを実際に動かして見比べてみる

そのまま試せる形でgithubに載せてみました。

https://github.com/tweeeety/gulp-task-gulp4.0.0-sample2

  • gulp@3.x.xの書き方
  • gulp@^4.x.xの書き方

をそれぞれ記載しています。

こちらも

こちらも合わせてご覧ください

参考

おわり

gulpを3.x.x->4.x.xからあげる場合は
書き直しになる場合が多いかもしれないので要注意
\(^o^)/