将 Imagemin 与 Grunt 搭配使用

凯蒂·亨佩纽斯
Katie Hempenius
X

设置 Imagemin Grunt 插件

此 Glitch 已包含 grunt、grunt-cli 和 grunt-contrib-imagemin 插件。如需为 Imagemin 添加配置，您需要修改 gruntfile.js 文件。

  • 点击 Remix to Edit 使项目可修改。
  • 在 gruntfile.js 中，将 //Add configuration here 注释替换为以下代码块：
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

此代码块会告知 Grunt 哪些文件应使用 Imagemin 进行压缩。

  • dynamic 表示将通过将文件名与指定的文件格式进行匹配来动态生成要压缩的文件列表。

  • 文件格式 {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} 将匹配 images/ 目录中的所有 JPEG 和 PNG 图片。

  • 在 grunt.registerTask(...) 前面添加下面这行代码，以加载 Imagemin 任务：
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • 最后，通过将 /* list plugins here */ 注释替换为 'imagemin'，将 Imagemin 添加为默认 Grunt 任务。现在，该行应如下所示：
grunt.registerTask('default', ['imagemin']);

✔︎ 入住

完整的 gruntfile.js 文件现在应如下所示：

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

自定义 Imagemin 配置

imagemin-pngquant 是一个用于指定压缩质量级别的插件。我们已在 package.json 文件中向此项目添加了 imagemin-pngquant，以便您可以使用它来压缩 PNG 文件。如需使用该工具，请在 Gruntfile 中声明该插件并指定压缩质量级别。

  • 将下面这行代码添加到 gruntfile.js 的顶部，以声明 imagemin-pngquant 插件：
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • 通过向 imagemin 对象添加 options 属性，添加用于压缩 PNG 图片的设置。该 options 属性应如下所示：
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

此代码会告知 Imagemin 使用 Pngquant 插件压缩 PNG。quality 字段使用 min 和 max 值范围来确定压缩级别 - 0 是最低压缩级别，1 是最高压缩级别。如需强制所有图片以 50% 质量压缩，请将 0.5 同时作为最小值和最大值传递。

✔︎ 入住

您的 gruntfile.js 文件现在应如下所示：

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

那么 JPEG 呢？该项目还包含 JPEG 图片，因此您还应指定这些图片的压缩方式。

自定义 Imagemin 配置（续）

使用已安装的 imagemin-mozjpeg 插件可压缩 JPEG 图片。

  • 将下面这行代码放在 gruntfile.js 的顶部，以声明 imagemin-mozjpeg 插件。
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • 接下来，将 mozjpeg({quality: 50}) 添加到 options 对象的数组内。该数组现在应如下所示：
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔︎ 入住

您的 gruntfile.js 文件现在应如下所示：

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

运行 Grunt 并验证使用 Lighthouse 的结果

  1. 点击工具按钮。
  2. 然后点击控制台按钮。
  3. 通过在控制台中输入以下命令来运行 Grunt：
grunt

Grunt 完成后，您应该会在控制台中看到如下消息：

Minified 6 images (saved 667 kB - 66.5%)

太棒了！这样的结果好多了。

最后，建议您使用 Lighthouse 来验证您刚刚所做的更改。借助 Lighthouse 的“对图片高效编码”性能审核，您可以了解网页上的 JPEG 图片是否经过了最佳压缩。

  • 如需预览网站，请按查看应用，然后按全屏 全屏。
  • 对当前版本的 Glitch 运行 Lighthouse 性能审核（Lighthouse > 选项 > 性能），并验证是否已通过“高效编码图片”审核。

通过了 Lighthouse 中的“高效编码图片”审核

成功！您已使用 Imagemin 以最佳方式压缩网页上的图片。