かもメモ

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

gulp4 watch終了したら The following tasks did not complete ってエラーが表示される件

昔作ったgulpでpugとstylusコンパイルしてるだけのLPを更新で弄っていました。
gulpでwatchしてたプロセスを終了したら

[23:55:48] The following tasks did not complete: default, watchHTML, watchCSS
[23:55:48] Did you forget to signal async completion?

ってエラーが表示されました。
タスクの処理そのものは完了しているので実害はないのですが、キモチワルイ...

gulp4 では明示的にタスクの終了を返してあげないとダメっぽい

When a stream, promise, event emitter, child process, or observable is returned from a task, the success or error informs gulp whether to continue or end. If a task errors, gulp will end immediately and show that error.
出典: Async Completion · gulp.js

タスク内でstream, promise, event emitter, child process, observableを返さないとタスクの終了が分らずエラーになるという事のようです。

Using an error-first callback
If nothing is returned from your task, you must use the error-first callback to signal completion. The callback will be passed to your task as the only argument - named cb() in the examples below.
出典: Async Completion - Using an error-first callback · gulp.js

要はタスク内でreturn gulp.src()みたいにstreamを返さないかったりするようなタスクは、タスクに渡される引数のコールバックをタスク内で実行してタスクの終了を明示的にする必要があったっぽい。

// gulpfile.js
// 略

// --------------------------------
// Server
// --------------------------------
const server = (cb) => {
  // stream を return しているものはOK
  return gulp.src('webroot')
    .pipe(webserver({
      port: 3000,
      livereload: true
    }));
};

// --------------------------------
// Watch
// --------------------------------
const watchHTML = (cb) => {
  gulp.watch([
    `${devDir}/pug/**/*.pug`
  ], buildHTML );
  cb(); // 明示的に終了を通知
};

const watchCSS = (cb) => {
  gulp.watch([
    `${devDir}/style/**/*.styl`
  ], gulp.series(buildCss, cssMinify));
  cb();  // 明示的に終了を通知
};

// --------------------------------
// Default
// --------------------------------
gulp.task( 'default', gulp.series('server', gulp.parallel(watchHTML, watchCSS)) );

gulp.watch()streamを返さないっぽいのでreturn gulp.watch()~してもダメでした。(監視してから終了してないですもんね...)
なので関数に渡される引数cb(名前は何でもいい)を実行するように修正したらwatch終了時にThe following tasks did not complete:エラーは出なくなりました。
(・ω<) 解🌟決 (横ピース)

動いて入るもののエラーが出てしまうのはキモチワルイので原因も解ってよかったです。
動いてるからいいやってってするのは良くないですよね!


[参考]

シービージャパン タンブラー レッド 375ml 真空2層構造

シービージャパン タンブラー レッド 375ml 真空2層構造