如何使用gulp按自定义模板批量重命名图片文件？

核心实现逻辑 #

• 命令行参数通过Node原生process.argv获取，执行gulp xxx时，第三个参数即为传入的前缀值
• gulp.src 读取文件默认按文件名字典序升序排列，完全匹配需求的升序排序要求，无需额外引入排序依赖
• 用闭包维护全局序号计数器，从1开始自增，通过padStart自动补0实现两位序号格式
• 重命名时保留文件原扩展名，拼接前缀、序号生成最终文件名

完整修改后的 gulpfile.js 代码 #

import gulp from 'gulp';
import rename from 'gulp-rename';
import del from 'del';

// 读取命令行传入的前缀参数，未传时默认前缀为空
const inputPrefix = process.argv[2] ?? '';
// 序号计数器
let fileIndex = 1;

const deleteImages = () => {
  return del(['build'], { force: true });
}

const renameImages = () => {
  // 每次执行任务重置计数器，避免watch模式下序号累加异常
  fileIndex = 1;
  return gulp.src('src/images/*.{jpg,jpeg,png,gif,wepb}', { encoding: false })
    .pipe(rename((fileInfo) => {
      // 序号补0，固定两位长度
      const serial = String(fileIndex).padStart(2, '0');
      // 替换文件名，保留原扩展名
      fileInfo.basename = `${inputPrefix}${serial}`;
      fileIndex++;
    }))
    .pipe(gulp.dest('build'))
}

gulp.task('default', gulp.series(deleteImages, renameImages));

使用方法 #

• 首次使用先执行npm install安装所有依赖
• 构建时按格式执行命令，例如需要前缀为1时，直接运行gulp 1
• 处理完成的文件会输出到项目根目录的build文件夹下，对应你给出的测试文件，传入前缀1时重命名结果和示例完全一致：
  • !test.png → 101.png
  • 1101.png → 102.png
  • 12345.jpg → 103.jpg
  • image3.jpg → 104.jpg
  • image4.jpg → 105.jpg
  • image5.jpg → 106.jpg
  • image6.jpg → 107.jpg
  • image7.jpg → 108.jpg
  • test.jpg → 109.jpg
  • test2.png → 110.png
  • test_test.png → 111.png

提示：如果你提到的wepb是格式笔误（标准格式为webp），只需要修改gulp.src里的后缀匹配规则即可。

扩展说明 #

• 如果需要调整序号长度，直接修改padStart的第一个参数即可，比如需要三位序号就改成padStart(3, '0')，序号会自动补前导零
• gulp.src配置中增加encoding: false是为了正确处理二进制图片资源，避免读取文件时出现乱码问题
• 如果执行命令时不传入前缀，生成的文件会自动以01.xxx、02.xxx的格式命名

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