使用gulp-if条件调用函数时遭遇dest.on is not a function错误

你遇到的dest.on is not a function错误，核心原因是**gulp-if期望接收一个符合Vinyl Stream接口的转换函数/对象，但你的injectAfterEach返回的是一个任务数组，而非单个stream**。Gulp无法将数组当作stream来处理，自然找不到stream特有的on方法。

下面是具体的修复方案，分步骤帮你重构代码：

1. 引入合并Stream的工具 #

首先安装merge-stream（用于将多个独立的stream合并成一个，让Gulp能正确识别）：

npm install merge-stream --save-dev

然后在你的Gulp文件顶部引入它：

var merge = require('merge-stream');

2. 重构injectAfterEach函数 #

修改函数逻辑，让它返回一个合并后的stream，而非任务数组：

function injectAfterEach(src) {
  var folders = getFolders(config.root.dest);
  // 过滤掉base文件夹，生成每个文件夹对应的处理stream
  var folderStreams = folders
    .filter(folder => folder !== 'base')
    .map(folder => {
      var fullPath = path.join(config.remotePath, folder, '/');
      console.log('Injecting path for folder: ' + fullPath);
      // 对当前文件夹的HTML文件注入路径，然后输出到对应子目录
      return gulp.src(src)
        .pipe(inject.afterEach('<script src="', fullPath))
        .pipe(gulp.dest(path.join(config.tasks.html.dest, folder)));
    });
  // 合并所有stream，返回单一的合法stream对象
  return merge(folderStreams);
}

3. 调整html任务中的gulp-if调用 #

gulp-if的第二个参数需要是一个返回stream的函数（而非直接执行函数），这样只有在production环境下才会触发路径注入逻辑：

gulp.task('html', function() {
  return gulp.src(config.tasks.html.src)
    // 用函数包裹injectAfterEach，确保仅在条件满足时执行
    .pipe(gulpif(process.env.NODE_ENV === 'production', () => injectAfterEach(config.tasks.html.src)))
    .pipe(gulpif(process.env.NODE_ENV === 'production', removeCode({ production: true })))
    .pipe(gulpif(process.env.NODE_ENV === 'production', htmlmin(config.tasks.html.htmlmin)))
    .pipe(gulp.dest(config.tasks.html.dest))
    .pipe(browserSync.stream());
});

关键说明 #

• 为什么用merge-stream？：它能把多个并行处理的文件夹stream合并成一个，让Gulp的流水线能正确识别和处理，解决了数组无法被当作stream的问题。
• 为什么用函数包裹injectAfterEach？：gulp-if会在条件满足时调用这个函数并获取返回的stream，如果直接执行injectAfterEach，不管环境如何都会提前运行，不符合你“有条件执行”的需求。
• 输出路径调整：我把gulp.dest改成了对应文件夹的子目录，避免不同文件夹的处理结果互相覆盖，你可以根据自己的项目结构调整这个路径。

额外注意事项 #

• 确保config.remotePath是合法的URL路径格式（比如以/开头或者完整的域名前缀）。
• 如果你的HTML源文件本身就分散在各个子文件夹中，建议把gulp.src(src)改成gulp.src(path.join(config.root.dest, folder, '*.html'))，精准处理对应文件夹下的文件。

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