如何将gulp-imagemin的压缩数据（大小、节省率）存入变量？

嘿，我刚好折腾过类似的需求，完全不用依赖只能输出控制台的插件！我们可以直接捕获gulp-imagemin处理后每个文件的原始大小、压缩后大小，然后累加统计到变量里，给你两种简单的实现方式：

方法一：用gulp-tap快速遍历文件收集数据 #

gulp-tap是一个轻量的插件，能让我们方便地访问流中的每个文件对象。每个经过gulp-imagemin处理的文件都会带上imagemin属性，里面就包含了我们需要的大小数据。

首先先安装依赖：

npm install gulp-tap --save-dev

然后修改你的任务代码：

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const tap = require('gulp-tap');

// 定义全局变量存储统计数据
let imageCompressionStats = {
  totalOriginalSize: 0,
  totalCompressedSize: 0,
  totalSpaceSaved: 0
};

gulp.task("compress-images", () => {
  // 每次执行任务前重置统计数据，避免旧数据干扰
  imageCompressionStats = {
    totalOriginalSize: 0,
    totalCompressedSize: 0,
    totalSpaceSaved: 0
  };

  return gulp.src("./uploads/*")
    .pipe(imagemin([
      imageminMozjpeg({ quality: 75 })
      // 这里可以添加其他压缩插件，比如imageminPngquant等
    ]))
    .pipe(tap(file => {
      // 检查当前文件是否有imagemin处理后的统计数据
      if (file.imagemin) {
        const { originalSize, compressedSize } = file.imagemin;
        imageCompressionStats.totalOriginalSize += originalSize;
        imageCompressionStats.totalCompressedSize += compressedSize;
        imageCompressionStats.totalSpaceSaved += originalSize - compressedSize;
      }
    }))
    .pipe(gulp.dest("./dist/uploads"))
    .on('end', () => {
      // 任务执行完成后，变量里就有完整的统计数据了
      console.log('压缩统计结果：', imageCompressionStats);
      // 这里可以把数据写入文件、发送到接口，或者做任何你需要的操作
      const savingsPercentage = (imageCompressionStats.totalSpaceSaved / imageCompressionStats.totalOriginalSize * 100).toFixed(2);
      console.log(`总共节省了 ${savingsPercentage}% 的空间`);
    });
});

方法二：用through2自定义流处理（无需额外轻量插件） #

如果你不想多装一个插件，可以用through2自己写一个简单的流处理器，原理和上面一样，只是手动处理文件流：

先安装依赖：

npm install through2 --save-dev

修改任务代码：

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const through2 = require('through2');

let imageCompressionStats = {
  totalOriginalSize: 0,
  totalCompressedSize: 0,
  totalSpaceSaved: 0
};

gulp.task("compress-images", () => {
  imageCompressionStats = {
    totalOriginalSize: 0,
    totalCompressedSize: 0,
    totalSpaceSaved: 0
  };

  return gulp.src("./uploads/*")
    .pipe(imagemin([
      imageminMozjpeg({ quality: 75 })
    ]))
    .pipe(through2.obj((file, encoding, callback) => {
      // 收集当前文件的压缩数据
      if (file.imagemin) {
        const { originalSize, compressedSize } = file.imagemin;
        imageCompressionStats.totalOriginalSize += originalSize;
        imageCompressionStats.totalCompressedSize += compressedSize;
        imageCompressionStats.totalSpaceSaved += originalSize - compressedSize;
      }
      // 一定要把文件传递下去，否则后续的gulp.dest拿不到处理后的文件
      callback(null, file);
    }))
    .pipe(gulp.dest("./dist/uploads"))
    .on('end', () => {
      console.log('原始总大小：', `${imageCompressionStats.totalOriginalSize} bytes`);
      console.log('压缩后总大小：', `${imageCompressionStats.totalCompressedSize} bytes`);
      console.log('总节省空间：', `${imageCompressionStats.totalSpaceSaved} bytes`);
    });
});

关键说明 #

• 每个经过gulp-imagemin处理的vinyl文件对象，都会自动添加imagemin属性，包含originalSize（原始字节数）和compressedSize（压缩后字节数）两个核心字段；
• 每次任务执行前记得重置统计变量，避免多次执行任务时数据累加；
• 如果你之前用的printSpaceSavings插件，它本质上也是读取这些file.imagemin的数据来输出控制台信息的，我们直接拿到源头数据就可以自由处理了。

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