Gulp任务中按文件名切换输出文件夹失败，求原因与最优方案

你的代码之所以失效，核心是Gulp的异步流式处理特性：你用了一个全局的filename变量，当gulp-if执行判断时，这个变量已经被最后一个文件的名称覆盖了。比如实际处理流程是：

1. 第一个文件normalFile_1.css经过tap，把filename设为它的名字
2. 还没执行gulp-dest，第二个文件specialFile.css过来，把filename改成自己的名字
3. 第三个文件normalFile_2.css再把filename覆盖
4. 最后所有文件执行gulp-if判断时，filename已经是normalFile_2.css，所以全部都走到了默认的Public/Css目录

这种依赖外部共享变量的实现方式本身就不可行，因为Gulp的流是按顺序处理文件，但变量是全局共享的，会被后续文件覆盖。

这里给你两种靠谱的实现方式：

方案一：用gulp-if的函数式条件判断 #

不要依赖外部变量，直接在gulp-if的条件里传入一个函数，针对每个文件单独判断：

.pipe($.if(function(file) {
  // 直接对当前文件的路径做判断
  return path.basename(file.path) === 'specialFile.css';
}, gulp.dest(PATHS.dist + '/Css/Special'), gulp.dest(PATHS.dist + '/Css')));

这样每个文件经过gulp-if时，都会调用这个函数获取自己的判断结果，完全不会有变量覆盖的问题。

方案二：拆分任务（更推荐） #

如果文件分类明确，直接把普通文件和特殊文件拆成两个独立的Gulp任务，逻辑更清晰，维护起来也方便：

// 处理普通SCSS文件
function cssNormal() {
  return gulp.src(['src/normalFile_1.scss', 'src/normalFile_2.scss'])
    .pipe($.sass()) // 这里假设你之前有编译SCSS的步骤
    .pipe(gulp.dest(PATHS.dist + '/Css'));
}

// 处理特殊SCSS文件
function cssSpecial() {
  return gulp.src('src/specialFile.scss')
    .pipe($.sass())
    .pipe(gulp.dest(PATHS.dist + '/Css/Special'));
}

// 合并成一个总任务
exports.css = gulp.parallel(cssNormal, cssSpecial);

如果后续普通文件增多，你还可以用通配符匹配，比如src/normalFile_*.scss，不用逐个列文件名。

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