gulp 4.0：运行系列任务

Question

我试图运行一系列的任务，即一个接一个在Gulp 4.0中，但是当我添加我的第三个任务时，我的gulp代码中断了。

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(); 
    })); 

如果我删除build文件夹，开始遍布&尝试添加另一项任务（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

您发信号异步完成任务的方式是错误的。阅读this answer，了解可以用信号表示异步完成的不同方式。

基本上，您通过gulp.src()创建的所有流都是异步的。这意味着你创建了流，你的代码立即返回。但是，在之后，流的实际处理仅从开始，然后退出任务功能。为了让消费者知道您正在使用流，并且必须等待流完成处理，您需要return来自您的任务的流。

你完全在做其他事情。您正在调用回调函数done，这是另一种表示异步任务完成的方法。但在这种情况下，这是完全错误的方式，因为当您调用回调函数done时，您创建的流甚至没有开始处理。

这意味着gulp认为你的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' 
));