gulp4 pit: assert.js throw err AssertionError.

元

• コンピュータの変更と環境の再インストールにより、gulpを使用すると常にエラーが報告されます。

assert.js:350
    throw err;
    ^
AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask]

gulp3.9.1と4.0の違いが原因だとわかるまで時間がかかりました。

gup3 と gulp4 の違い

Gulp 4の最大の変更点は、以前のように依存タスクのリストを渡すことができないことです。
Gulp3では、タスクA,B,Cのリストがあり、A,B,Cを順番に実行したい場合、次のようなコードになります。

gulp.task('default', ['A', 'B, 'C']);

Gulp 4では、このようなことはもうできません。以下のようなエラーが出ます。

assert.js:350
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (D:\python\project\front-end-engineering\shop\node_modules\undertaker\lib\set-task.js:1
0:3)
    at Gulp.task (D:\python\project\front-end engineering\shop\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (D:\python\project\front-end engineering\shop\gulpfile.js:34:6)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)

Gulp3の方法で依存タスクを指定する代わりに、gulp.seriesとgulp.parallelを使う必要があります。gulpタスクは現在2つの引数しか持たないからです。
gulp.series: 順番に実行する
gulp.paralle：並列に計算することができる

gulp.task('my-tasks', gulp.series('a', 'b', 'c', function() {
  // Do something after a, b, and c are finished.
}));
gulp.task('build', gulp.parallel('styles', 'scripts', 'images', function () {
  // Build the website.
}));

gulp.task('my-tasks', gulp.series('a', gulp.parallel('styles', 'scripts', 'images'), 'b', 'c', function() {
  // Do something after a, b, and c are finished.
}));

またはこれ

assert.js:85
  throw new assert.AssertionError({
  ^
AssertionError: Task never defined: serve
    at getFunction (D:\python\project\front-end engineering\shop\node_modules\undertaker\lib\helpers\normalizeArgs.js:15:5)
    at arrayMap (D:\python\project\front-end engineering\shopnode_modules\lodash.map\index.js:140:21)
    at map (D:\python\project\front-end engineering\shopnode_modules\lodash.map\index.js:1836:10)
    at normalizeArgs (D:\python\project\front-end engineering\shopnode_modules\undertaker\lib\helpers\normalizeArgs.js:19:10)
    at Gulp.series (D:\python\project\front-end engineering\shopnode_modules\undertaker\lib\series.js:13:14)
    at Object.<anonymous> (D:\python\project\front-end engineering\shop/gulpfile.js:41:27)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)

関連するタスクが発生しないと呼び出すことができない

Gulp 3では、デフォルトですべてが非同期で実行されるため、ファイルに先行するタスクを参照させることが可能です。さて、依存関係を呼び出すタスクは、gulpファイル内で依存関係が定義された後に配置する必要があります。さもなければ、次のようなエラーが発生します。

gulp.task('clean', function(done) {
  del(['build]);
    done();
});

回避策 依存関係のタスクをファイルの一番下に作ってください。
gulp4でタスクの終了を指定する必要があります。
gulp4では、タスクが完了したことをgulpに伝える必要があります。gulp3では、非同期完了を知らせないと、タスクが戻ったときにgulpが完了したと思ってしまうため、このようなことをする必要はありません。

コールバック関数をタスクの最初の引数として使用し、タスクが完了したらその関数を呼び出すだけです。

gulp.task('minify:js', function() {
  return gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
});
gulp.task('message', function() {
  return new Promise(function(resolve, reject) {
    console.log("HTTP Server Started");
    resolve();
  });
});

gulpタスクに完了を伝えるもう1つの一般的な方法は、ストリームまたは  約束 :

var bsConfig = {
    server: 'build',
    files: [
        'build'
    ],
    open: false,
};

gulp.task('browserSync', function() {
    bs.init(bsConfig);
});

gulp.task('serve', gulp.series('build', gulp.parallel('watch', 'browserSync')));

スタイルインジェクションではなくブラウザ同期更新

Gulp 3 のファイルでは HTML 再構築時にリフレッシュし、CSS 変更時に軽快なスタイル注入を行うことに問題はありませんでしたが、Gulp 4 にアップグレードしたら、CSS 変更後にブラウザがリロードされるようになりました。

• 3つのことを変更する必要があります。まず、Browsersync のコンストラクタにファイルの配列を渡すことを確認します。

var bsConfig = {
    server: 'build',
    files: [
        'build'
    ],
    open: false,
};

gulp.task('browserSync', function() {
    bs.init(bsConfig);
});

• 次に、タスクbs.stream()の終了スタイルがあれば、それを削除することができます。
• 第三に、開発サーバーでライブスタイルインジェクションを行う場合、watchとbrowserSyncのタスクは、以下のように、終了せずに並行して実行する必要があります。

gulp.task('serve', gulp.series('build', gulp.parallel('watch', 'browserSync')));

参考文献
https://github.com/gulpjs/gulp/blob/master/docs/API.md
https://www.fastless.com/gulp-4

© Copyright: 51CTOブログより by yhyang