将 Imagemin 与 Grunt 搭配使用

Katie Hempenius
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 图片。

。
  • 将下面这行代码添加到 Imagemin 任务的前面，以加载 Imagemin 任务 grunt.registerTask(...)：
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 中指定压缩质量级别。

  • 如需声明 imagemin-pngquant 插件，请将下面这行代码添加到 gruntfile.js：
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • 通过向options imagemin 对象。该 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 图像。

  • 如需声明 imagemin-mozjpeg 插件，请将下面这行代码放在 gruntfile.js。
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']);

跑步，使用 Lighthouse 验证结果

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

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

Minified 6 images (saved 667 kB - 66.5%)

太棒了！效果要好得多。

最后，最好使用 Lighthouse 来验证刚刚 。Lighthouse 的“高效对图片进行编码”效果审核工具 了解您的网页上的 JPEG 图片是否经过最佳压缩。

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

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

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