Gulp 5 中处理二进制文件的注意事项

在升级到 Gulp 5 后，许多开发者发现了一个重要变化：当使用 gulp.src() 和 gulp.dest() 复制 PNG 等二进制文件时，文件内容会被意外修改。这个问题源于 Gulp 5 对文件处理方式的重大调整。

问题现象

当开发者使用 Gulp 5 复制 PNG 文件时，文件内容会被错误地编码处理。原始文件内容中的十六进制值如"89504E47"会被转换为"EFBFBD50"等异常值。这种变化会导致图像文件损坏，无法正常使用。

问题根源

Gulp 5 默认会将所有文件内容视为 UTF-8 编码的文本进行处理。对于二进制文件（如图片、字体等），这种处理方式会导致文件内容被错误地重新编码，从而损坏文件。

解决方案

有两种方法可以正确处理二进制文件：

1. 使用 encoding 选项： 在 gulp.src() 中设置 {encoding: false} 可以禁用编码转换：

   gulp.src('./src/img/**/*.+(png|jpg|gif|svg)', {encoding: false})
       .pipe(gulp.dest('dest/img/'));
   

2. 使用 read 选项优化性能： 如果只是简单地复制文件而不需要处理内容，可以使用 {read: false} 来提高性能：

   gulp.src('./src/img/**/*.+(png|jpg|gif|svg)', {read: false})
       .pipe(gulp.dest('dest/img/'));
   

最佳实践建议

1. 对于图片、字体等二进制文件，始终使用 {encoding: false} 选项
2. 如果只是复制文件而不需要处理内容，使用 {read: false} 可以显著提高性能
3. 在升级到 Gulp 5 时，检查所有处理二进制文件的任务并进行相应调整

技术背景

Gulp 5 的这一变化是为了提供更一致的默认行为。在之前的版本中，Gulp 会尝试自动检测文件类型，但这种自动检测有时会导致不可预测的结果。通过明确要求开发者指定如何处理二进制文件，Gulp 5 提供了更可靠和可预测的行为。

对于需要处理多种类型文件的项目，建议根据文件类型分别处理：

• 文本文件（如 JS、CSS、HTML）使用默认处理方式
• 二进制文件明确指定 {encoding: false}

这种区分处理的方式既能保证文本文件的正确处理，又能确保二进制文件的完整性。