Gulp转换WebP图片前如何检查对应WebP文件是否已存在

使用Gulp遍历图片目录，为目录内每张图片生成对应WebP版本，当前功能运行正常，但每次执行构建流程时都会重新转换所有图片。需要调整转换函数逻辑，在执行转WebP操作前先检查对应WebP版本是否已存在，避免重复转换。

当前原始实现代码：

gulp.task('convert-webp', function () {
   return gulp.src('media/image/**/*')
      .pipe(webp())
      .pipe(gulp.dest(function (file) {
         return file.base;
      }));
});

两种实现方式可按需选择：

方案1：使用gulp-changed插件（推荐） #

gulp-changed会自动比对源文件和目标输出文件，仅当目标文件不存在、或源文件修改时间晚于目标文件时，才会将文件传入后续处理管道，自动跳过重复转换逻辑，配置简单不容易出错。

• 第一步安装插件：

npm install gulp-changed --save-dev

• 修改任务代码，在webp转换前插入检查逻辑，同时修正源文件匹配规则，避免读入已生成的webp文件：

const changed = require('gulp-changed');

gulp.task('convert-webp', function () {
  return gulp.src('media/image/**/*.{png,jpg,jpeg}')
    // 目标路径和gulp.dest保持一致，指定对比时匹配.webp后缀
    .pipe(changed('media/image', { extension: '.webp' }))
    .pipe(webp())
    .pipe(gulp.dest(file => file.base));
});

方案2：自定义过滤逻辑（无需额外安装插件） #

如果不想引入额外依赖，可以自己写一个简单的文件过滤流，用Node原生fs模块检查对应路径的webp文件是否存在，存在就跳过处理。Gulp本身依赖through2，不需要额外安装：

const fs = require('fs');
const through2 = require('through2');

// 自定义过滤流：跳过已存在对应webp版本的图片
function filterExistingWebp() {
  return through2.obj((file, _, callback) => {
    // 替换源文件后缀为webp，得到目标文件路径
    const targetWebpPath = file.path.replace(/\.(png|jpe?g)$/i, '.webp');
    fs.access(targetWebpPath, fs.constants.F_OK, err => {
      // 目标文件不存在才传入下一个处理环节
      err ? callback(null, file) : callback(null);
    });
  });
}

gulp.task('convert-webp', function () {
  return gulp.src('media/image/**/*.{png,jpg,jpeg}')
    .pipe(filterExistingWebp())
    .pipe(webp())
    .pipe(gulp.dest(file => file.base));
});

补充说明：两种方案都建议把gulp.src的匹配规则从通配所有文件改成只匹配需要转换的图片格式（png/jpg/jpeg），避免把已经生成的webp文件、目录下其他非图片文件读入处理流，浪费性能。

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