使用Gulp Rename移除文件名空格：任务偶尔失效问题排查

你遇到的这个“99%成功”的问题，根源其实在正则表达式的匹配规则上，我来帮你拆解一下：

问题分析 #

你当前用的正则/ /只会匹配文件名中的第一个空格，如果文件名里有多个连续或者分散的空格，剩下的空格就会被漏掉。比如my photo album.jpg这样的文件名，替换后会变成my_photo album.jpg，后面的空格还留在原地，这就造成了“偶尔失效”的假象。

另外还有个小细节：你代码里的changed("dist")和最终输出的gulp.dest("dest")路径不一致，这会导致gulp-changed插件的文件变化检测逻辑出错，可能让已经处理过的文件重复进入流程，也会干扰你对任务效果的判断。

修复后的代码 #

先把正则改成全局匹配模式，同时统一路径：

gulp.task("underscore", function (done) {
  gulp.src("src/**/*.{jpg,jpeg}")
    .pipe(changed("dest")) // 和输出路径统一，确保变化检测准确
    .pipe(rename(function(opt) {
      // 加g标志实现全局匹配所有空格
      opt.basename = opt.basename.replace(/ /g, '_');
      return opt;
    }))
    .pipe(gulp.dest("dest"));
  done();
});

如果你用的是Gulp 4及以上版本，更推荐使用返回流的写法（不需要手动调用done()，更符合Gulp的现代规范）：

const { src, dest, task } = require('gulp');
const changed = require('gulp-changed');
const rename = require('gulp-rename');

task('underscore', () => {
  return src('src/**/*.{jpg,jpeg}')
    .pipe(changed('dest'))
    .pipe(rename(opt => {
      opt.basename = opt.basename.replace(/ /g, '_');
    }))
    .pipe(dest('dest'));
});

额外优化（可选） #

如果你的文件名里可能包含制表符、换行符这类其他空白字符，可以把正则改成/\s+/g，这样能一次性替换所有空白字符（包括多个连续空白）为单个下划线，比如my photo album.jpg会变成my_photo_album.jpg：

opt.basename = opt.basename.replace(/\s+/g, '_');

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