Gulp 4中gulp.series未按串行执行任务的问题求助

我之前也碰到过Gulp 4里这种任务执行顺序不符合预期的情况，你的问题大概率是任务没有正确标记异步完成导致的。

问题根源 #

你当前的代码里，done()是直接写在任务函数末尾的，而不是等待流处理完成后再调用。Gulp 4会在你调用done()的瞬间就判定任务已完成，但此时gulp.src()的流还在异步处理中，所以Gulp会提前启动task3，最终导致三个任务实际是并行执行的。另外你的代码里还有个小语法错误：.pipe(debug({title: 'TASK1'})缺少了闭合括号，这也可能干扰流的正常结束判断。

修正方案 #

你可以用两种方式来正确标记任务完成：

方案1：直接返回流（推荐）

Gulp 4支持通过返回流、Promise或Observable来自动判断任务完成，不需要手动调用done()：

gulp.task('task1', function() { 
  return gulp.src(...) 
    .pipe(debug({title: 'TASK1'})) // 补全缺失的闭合括号
    .pipe(...); 
});

gulp.task('task2', function() { 
  return gulp.src(...) 
    .pipe(debug({title: 'TASK2'})) 
    .pipe(...); 
});

gulp.task('task3', function() { 
  return gulp.src(...) 
    .pipe(debug({title: 'TASK3'})) 
    .pipe(...); 
});

gulp.task('default', gulp.series(gulp.parallel('task1', 'task2'), 'task3'));

方案2：在流结束时调用done()

如果你需要保留done()的写法，一定要把它绑定到流的end事件上，确保流处理完成后才标记任务结束：

gulp.task('task1', function(done) { 
  gulp.src(...) 
    .pipe(debug({title: 'TASK1'})) 
    .pipe(...))
    .on('end', done); // 流结束后再调用done
});

gulp.task('task2', function(done) { 
  gulp.src(...) 
    .pipe(debug({title: 'TASK2'})) 
    .pipe(...))
    .on('end', done); 
});

gulp.task('task3', function(done) { 
  gulp.src(...) 
    .pipe(debug({title: 'TASK3'})) 
    .pipe(...))
    .on('end', done); 
});

gulp.task('default', gulp.series(gulp.parallel('task1', 'task2'), 'task3'));

验证效果 #

修正后运行默认任务，你会看到task1和task2的日志全部输出完成后，才会开始输出task3的日志，完全符合你预期的「先并行task1/task2，再串行task3」的执行顺序。

内容的提问来源于stack exchange，提问作者chepukha