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

如果我删除构建文件夹以全部启动＆amp;尝试添加另一个任务（minfy-js），我的第三个任务失败＆amp; 文件夹也没有创建。

    //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中发出异步完成信号的不同方式的概述。

基本上，您通过gulp.src()创建的所有流都是异步的。这意味着您创建了流，您的代码会立即返回。但是，在退出任务函数后，流的实际处理仅从开始。为了让gulp知道您正在使用流并且必须等待流完成处理，您需要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' ));

gulp 4.0：串行运行任务

1 个答案: