【gulp】Task function must be specified 解決方法【備忘録】

以前の記事で、ターミナルでgulpを実行した際に、Node.jsとgulpのバージョンが合わずに起こったエラーを解決したものの、今度は

AssertionError [ERR_ASSERTION]: Task function must be specified

というエラーが発生…。

これはどうやら、Gulp3系から4系に移行したことでgulpfile.jsの書き方が一部変わったことによるエラーのよう。

gulpfile.jsの書き換え

gulp4では

gulp.task()
gulp.watch()

の書き方が変更になっているそうなので、偉大な先人たちの残した記事を参照しながらgulpfile.jsを書き換えてみる。

変更前

gulp.task(‘default’, [‘build’, ‘browser-sync’], _function_(){
	gulp.watch(‘._src_*.js’, [‘build’]);
  	gulp.watch(‘./*.html’, [‘bs-reload’]);
  	gulp.watch(‘._dist_*.+(js|css)’, [‘bs-reload’]);
}));

変更後

gulp.task(‘default’, gulp.parallel([‘build’, ‘browser-sync’], function(){
	gulp.watch(‘._src_*.js’, gulp.task(‘build’));
  	gulp.watch(‘./*.html’, gulp.task(‘bs-reload’));
  	gulp.watch(‘._dist_*.+(js|css)’, gulp.task(‘bs-reload’));
}));

gulpを実行！！

まず'build'にエラー発生。

エラーメッセージは以下の通り…

Error: Received a non-Vinyl object in dest()

'build'タスクの中ではbrowserifyを使ってjsファイルを１つにまとめて出力しよう！ということを行なっているはず。

ここで何かエラーが起きてる…。

もう一つ、'defaults'にもエラー発生。

エラーメッセージは

The following tasks did not complete: browser-sync, <anonymous>
Did you forget to signal async completion?

エラーばかりで挫けそうだけど、ググりまくる。

Received a non-Vinyl object in dest()

dest()にVinylオブジェクトじゃないものを受け取ったよ〜

という意味でしょうか…。

コードの中身はこんな感じ。

var gulp = require(‘gulp’);
var browserify = require(‘browserify’);
var browserSync = require(‘browser-sync’).create();
var source = require(‘vinyl-source-stream’);

gulp.task(‘build’, function(){
  browserify({
    entries: \[‘src/app.js’\]
  }).bundle()
    .pipe(source(‘bundle.js’))
    .pipe(gulp.dest(‘dist/‘));
});

gulpとかVinylって何という話はこちらの記事がわかりやすかった。

gulp と browserify と vinyl の話 – <body>

browserifyの.bundle()が返すのはvinylオブジェクトじゃないからvinyl-source-streamでvinylオブジェクトに変換する必要があるよー、ということらしい。

ただ、上記記事の中でこのような記述が。