gulp3→4の変更点に気をつけよう
これはユアマイスター Advent Calendar 2018の23日目の記事です。
AssertionError: Task function must be specified
に長らくお世話になりましたので、こちらに関する内容を記載したいと思います。
引数指定の変更
4系からgulp.taskやgulp.watchの第二引数の指定方法が変わっています。
gulp.taskの場合
// 3系の場合
gulp.task('default', ['sass']);
// 4系の場合
gulp.task('default', gulp.task('sass'));
gulp.watchの場合
// 3系の場合
gulp.watch('webroot/sass/*.sass', ['sass']);
// 4系の場合
gulp.watch('webroot/sass/*.sass', gulp.task('sass'));
配列指定から、関数指定になるイメージですかね。
この変更をしていないと、自分のようにAssertionError: Task function must be specified
と長い間お付き合いする事になります。
gulp.seriesの解説
gulp.seriesは4系で追加された関数で、順番に実行するというものです。
gulp.task('one', function(done) {
console.log('task one');
done();
});
gulp.task('two', function(done) {
console.log('task two');
done();
});
gulp.task('default', gulp.series('one', 'two', function(done) {
console.log('task default');
done();
}));
サンプルコードです。
gulp.seriesにはtask('one', ...)
とtask('two', ...)
を指定しています。
これをgulpで実行すると
[vagrant@local hoge]$ gulp
[02:47:42] Using gulpfile /vagrant/sample/gulpfile.js
[02:47:42] Starting 'default'...
[02:47:42] Starting 'one'...
task one
[02:47:42] Finished 'one' after 880 μs
[02:47:42] Starting 'two'...
task two
[02:47:42] Finished 'two' after 330 μs
[02:47:42] Starting '<anonymous>'...
task default
[02:47:42] Finished '<anonymous>' after 169 μs
[02:47:42] Finished 'default' after 5.52 ms
[vagrant@local hoge]$
順番に実行されていることがわかります。
一応gulp.seriesのone
とtwo
を逆にして実行してみます。
[vagrant@local hoge]$ gulp
[02:50:05] Using gulpfile /vagrant/sample/gulpfile.js
[02:50:05] Starting 'default'...
[02:50:05] Starting 'two'...
task two
[02:50:05] Finished 'two' after 1.56 ms
[02:50:05] Starting 'one'...
task one
[02:50:05] Finished 'one' after 244 μs
[02:50:05] Starting '<anonymous>'...
task default
[02:50:05] Finished '<anonymous>' after 217 μs
[02:50:05] Finished 'default' after 4.55 ms
[vagrant@local hoge]$
想定通り順番に実行されている事がわかりました。
gulp.parallelの解説
gulp.parallelは4系で追加された関数で、並列で実行するというものです。
上記サンプルコードのgulp.series
部分をgulp.parallel
に変えて実行してみます。
gulp.task('one', function(done) {
console.log('task one');
done();
});
gulp.task('two', function(done) {
console.log('task two');
done();
});
gulp.task('default', gulp.parallel('one', 'two', function(done) {
console.log('task default');
done();
}));
実行結果
[vagrant@local hoge]$ gulp
[03:21:41] Using gulpfile /vagrant/sample/gulpfile.js
[03:21:41] Starting 'default'...
[03:21:41] Starting 'one'...
[03:21:41] Starting 'two'...
[03:21:41] Starting '<anonymous>'...
task one
[03:21:41] Finished 'one' after 1.63 ms
task two
[03:21:41] Finished 'two' after 1.52 ms
task default
[03:21:41] Finished '<anonymous>' after 1.56 ms
[03:21:41] Finished 'default' after 4.22 ms
[vagrant@local hoge]$
Starting
に注目して下さい。
oneとtwoが平行して実行されている事がわかります。
gulp.parallel
に指定されたtaskはこのように平行して実行されます。
callbackについて
各taskのfunctionの引数にdone
が指定されていて、function内の処理でdone();
が実行されています。
これはcallbackといって、task内の処理の終了を意味します。
なので、このメソッドが呼ばれたタイミングで、そのtaskの処理は終了を宣言します。
gulp.task('default', ..., function(done){...})
内のdone();
外して実行してみます。
[vagrant@local hoge]$ gulp
[03:12:04] Using gulpfile /vagrant/sample/gulpfile.js
[03:12:04] Starting 'default'...
[03:12:04] Starting 'one'...
task one
[03:12:04] Finished 'one' after 985 μs
[03:12:04] Starting 'two'...
task two
[03:12:04] Finished 'two' after 465 μs
[03:12:04] Starting '<anonymous>'...
task default
[03:12:04] The following tasks did not complete: default, <anonymous>
[03:12:04] Did you forget to signal async completion?
[vagrant@local hoge]$
このようにtask defaultのStarting
はありますが、callbackしていない事によってFinished
が走りません。
その為、Did you forget to signal async completion?
というエラーが表示されます。
つまり、各taskでは処理実行の終了を宣言する必要があります。
参考
https://zzz.buzz/2016/11/19/gulp-4-0-upgrade-guide/
https://github.com/gulpjs/gulp
https://gist.github.com/jeromecoupe/0b807b0c1050647eb340360902c3203a
Author And Source
この問題について(gulp3→4の変更点に気をつけよう), 我々は、より多くの情報をここで見つけました https://qiita.com/tatsuo-iriyama/items/08ba4bd621b7fdedcc4e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .