Gulp构建脚本配置问题：跨任务无法识别生成的中间文件

这问题我太熟悉了！核心原因是Gulp任务的异步执行逻辑没处理好——默认情况下Gulp会并行触发所有任务，导致压缩任务（步骤2、4）去读取文件时，合并/编译任务（步骤1、3）还没把最新的文件写入磁盘，自然只能拿到旧版本的文件。下面给你两种解决方案，从简单到优化版：

方案1：明确任务依赖与执行顺序（适合保留中间文件的场景） #

如果一定要把开发版文件写入磁盘再处理生产版，你需要用gulp.series()确保任务按顺序执行，并且每个异步任务要正确通知Gulp完成状态（比如返回流、Promise或者调用回调）。

示例代码：

const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');

// 1. 合并JS到开发目录
function jsDev() {
  return gulp.src('src/js/**/*.js')
    .pipe(concat('app.js'))
    .pipe(gulp.dest('dev/js'));
}

// 2. 压缩开发目录的JS到生产目录
function jsProd() {
  return gulp.src('dev/js/app.js')
    .pipe(uglify())
    .pipe(gulp.dest('prod/js'));
}

// 3. 编译SASS到开发目录
function sassDev() {
  return gulp.src('src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dev/css'));
}

// 4. 压缩开发目录的CSS到生产目录
function cssProd() {
  return gulp.src('dev/css/**/*.css')
    .pipe(cleanCSS())
    .pipe(gulp.dest('prod/css'));
}

// 串联JS任务：先合并再压缩
const jsTasks = gulp.series(jsDev, jsProd);
// 串联CSS任务：先编译再压缩
const cssTasks = gulp.series(sassDev, cssProd);

// 总任务：并行处理JS和CSS的串联任务
exports.default = gulp.parallel(jsTasks, cssTasks);

关键说明：

• 用gulp.series()把jsDev和jsProd绑定，确保合并完成后再执行压缩；CSS同理。
• 每个任务都返回了流（return gulp.src(...)），Gulp会通过流的结束事件判断任务是否完成，避免提前执行后续任务。

方案2：跳过中间文件，用流直接分两路输出（更高效） #

其实没必要把开发版写入磁盘再读取，我们可以在同一个流里同时输出开发版和生产版，既提升速度又避免文件读写的依赖问题：

示例代码：

const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
const clone = require('gulp-clone');
const merge = require('merge-stream');

function processJS() {
  const jsStream = gulp.src('src/js/**/*.js')
    .pipe(concat('app.js'));

  // 克隆流，一路输出开发版，一路压缩后输出生产版
  const devStream = jsStream.pipe(clone())
    .pipe(gulp.dest('dev/js'));
  const prodStream = jsStream.pipe(clone())
    .pipe(uglify())
    .pipe(gulp.dest('prod/js'));

  return merge(devStream, prodStream);
}

function processCSS() {
  const cssStream = gulp.src('src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError));

  // 同理克隆流输出两个版本
  const devStream = cssStream.pipe(clone())
    .pipe(gulp.dest('dev/css'));
  const prodStream = cssStream.pipe(clone())
    .pipe(cleanCSS())
    .pipe(gulp.dest('prod/css'));

  return merge(devStream, prodStream);
}

exports.default = gulp.parallel(processJS, processCSS);

关键说明：

• 用gulp-clone克隆流，避免流被消费后无法重复使用；
• 用merge-stream合并多个流，确保Gulp能跟踪所有异步操作的完成状态；
• 全程在内存中处理，跳过磁盘读写，速度更快，也彻底解决了文件依赖的问题。

常见坑点提醒 #

• 不要忘记返回流/Promise/调用回调：如果任务没有明确通知Gulp完成，Gulp会认为任务立即结束，导致后续任务提前执行；
• Gulp 4+才支持series和parallel，如果是旧版本需要升级或者用run-sequence插件；
• 压缩任务如果报错（比如JS语法错误），会导致流中断，记得添加错误处理（比如.on('error', ...)）。

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