如何用Gulp.js实现目录实时监听自动压缩用户头像？

嗨，很高兴看到你的头像压缩效果这么出色！要实现实时监听新增图片并自动压缩的功能，你可以借助Gulp自带的watch能力轻松搞定，具体实现步骤如下：

步骤1：抽离可复用的压缩逻辑 #

首先把你现有的压缩代码抽成一个独立函数，这样不管是手动执行还是监听触发，都能复用这段逻辑，避免代码冗余：

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

// 抽离压缩逻辑为可复用函数
function compressAvatars() {
  return gulp.src('pure/img/avatars/*')
    .pipe(imagemin())
    .pipe(gulp.dest('product/img/avatars'));
}

步骤2：保留手动压缩任务（可选但推荐） #

保留原来的手动执行任务，方便你偶尔需要批量压缩已有头像时使用：

// 注册手动压缩任务，和之前的用法一致
gulp.task('compress_avatars', compressAvatars);

步骤3：创建监听任务 #

用gulp.watch监听头像目录的文件变化（包括新增文件），一旦有新头像加入，自动触发压缩：

// 创建监听任务
function watchAvatars() {
  // 监听目标目录的所有文件，新增/修改时自动执行压缩
  gulp.watch('pure/img/avatars/*', compressAvatars);
}

步骤4：设置默认任务，一键启动监听 #

注册一个默认任务，这样你只需要在命令行敲gulp就能启动实时监听模式：

// 设置默认任务，启动监听
gulp.task('default', watchAvatars);

额外优化建议 #

• 如果你的头像目录存在子文件夹，可以把监听路径改成'pure/img/avatars/**/*'（双星号**会匹配所有层级的子目录）。
• 如果你希望启动监听时先自动压缩一遍已有的所有头像，可以修改默认任务为：

  // 先全量压缩现有头像，再启动监听
  gulp.task('default', gulp.series(compressAvatars, watchAvatars));
  

现在你只需要在终端运行gulp命令，Gulp就会一直后台运行，每当PHP代码往pure/img/avatars目录新增头像时，就会自动把压缩后的版本输出到product/img/avatars啦！

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