GX博客

如果你还没使用过 Grunt，可先阅读Grunt的安装及其插件的选择。下面详细讨论 grunt-contrib-imagemin 插件的配置和使用：

配置选项

以下为插件配置的默认值：

imagemin: {
  options:{
    optimizationLevel: 3,
    progressive : true,
    interlaced: true,
    svgoPlugins: [],
    use: [imagemin.gifsicle(), imagemin.jpegtran(), imagemin.optipng(), imagemin.svgo()],
    concurrency: os.cpus().length
  },
  // ...
},
// ...

• optimizationLevel

  png 图片的优化级别，可选值为0至7。当优化级别为0时，不会对像颜色深度或颜色类型等图像属性进行修改。优化级别1启用单个 IDAT（图像数据块）压缩试验。所选试验为OptiPNG认为最有效的。优化级别2和更高级别可实现多个 IDAT 压缩试验; 级别越高，试验越多，优化需要的时间越长。推荐使用默认值。

• progressive

  jpg 由无损转为渐进式。它们的差别主要体现在浏览器加载时，无损图片是一次性扫描的，从上至下的加载显示，而渐进式则是多次扫描，从模糊到清晰的显示。两种方式的图片大小相近，但用户体验后者更好。

• interlaced

  交错gif，用于渐进式渲染。

• svgoPlugins

  自定义要使用的 SVGO 插件。了解详细配置请点击这里。

• use

  使用的 imagemin 插件，其中包含 gif 、jpg、png 和 svg 的无损优化器。

• concurrency

  控制可以并行执行的最大图像优化数（默认使用逻辑 CPU 内核数）。

示例

const {dir} = require('./grunt.config');
// ...
dynamic: {
  files: [
    {
      expand: true,
      cwd: `${dir.imageDev}`,
      src: ['**/*.{png,jpg,gif,svg}'],
      dest: `${dir.imagePro}`
    }
  ]
}

上面配置一个名为 dynamic 的目标，使用默认配置，并动态映射开发目录下的四种格式图片到生产目录。其中具体目录路径从配置 js 文件读取，使用 ES6 的模板字符串引入。

一般使用默认配置就可以达到很好的压缩优化效果。如果你的静态资源是通过 Nginx 代理的，可以把输出路径直接配置到 Nginx 的静态目录下。