一息4.0：私は私の第三タスク私の一気コードブレークを追加するとき、私は、一連のタスクのセットを実行しようとしているシリーズ

Question

で実行されるタスク、それはしかし、ガルプ4.0に次々です。

gulp.task('concat-js', (done) => { 
     gulp.src([ 
     'app1.js', 
     'app2.js', 
     ]) 
     .pipe(concat("app.js")) 
     .pipe(gulp.dest('build')) 
     done(); 
    }); 

    gulp.task('concat-css', (done) => { 
     gulp.src([ 
     '.styles1.css', 
     '.style2.css' 
     ]) 
     .pipe(concat("app.css")) 
     .pipe(gulp.dest('build')) 
     done(); 
    }); 

    gulp.task('minify-js', (done) => { 
     gulp.src('./build/app.js') 
     .pipe(uglify()) 
     .pipe(gulp.dest('./build/')) 
     done(); 
    }) 

    //this works & creates /build with the app.js & app.css files 
    gulp.task('build-production-static-resource', gulp.series('concat-js', 'concat-css',, (done) => { 
     done(); 
    })); 

私は別のタスク（minfy-JS）を追加し、すべての&を超える試みを開始するには、ビルドフォルダを削除すると、私の第三タスクは& buildフォルダも作成されませんが失敗しました。

//File not found with singular glob: /Users/user/myapp/build/app.js 
    gulp.task('build-production-static-resource', gulp.series('concat-js', 'concat-css', 'minify-js', (done) => { 
     done(); 
    })); 

Answer 1

タスクの非同期完了を通知する方法は間違っています。非同期補完をgulpで通知できるさまざまな方法の概要については、this answerを参照してください。

基本的に、gulp.src()で作成するすべてのストリームは非同期です。つまり、ストリームを作成するとすぐにコードが返されます。ただし、の後にストリームの実際の処理はで始まり、タスク関数を終了します。 gulpがストリームを使用していること、ストリームが処理を終了するまで待つ必要があることを知るには、タスクのストリームをreturnにする必要があります。

あなたはまったく別のことをしています。あなたはコールバック関数doneを呼び出しています。これは、非同期タスクの完了を通知する別の方法です。しかし、これは完全に間違った方法です。コールバック関数doneを呼び出すと、作成したストリームは処理を開始していないためです。一息を意味

は、あなたのタスク内のコードでも、実際に実行を開始していないが、あなたのconcat-jsタスクは、完了したと考えています。だからminify-jsタスクが実行されたときに./build/app.jsファイルがまだ作成されていません。ブーム。エラー。

はこの常にreturnストリームを、あなたのタスクから修正するには：

gulp.task('concat-js',() => { 
    return gulp.src([ 
     'app1.js', 
     'app2.js', 
    ]) 
    .pipe(concat("app.js")) 
    .pipe(gulp.dest('build')) 
}); 

gulp.task('concat-css',() => { 
    return gulp.src([ 
     '.styles1.css', 
     '.style2.css' 
    ]) 
    .pipe(concat("app.css")) 
    .pipe(gulp.dest('build')) 
}); 

gulp.task('minify-js',() => { 
    return gulp.src('./build/app.js') 
    .pipe(uglify()) 
    .pipe(gulp.dest('./build/')) 
}) 

gulp.task('build-production-static-resource', gulp.series(
    'concat-js', 'concat-css', 'minify-js' 
));