Grunt - imagemin图像压缩

项目前端构建部分引入了 Grunt,便于各项处理任务的自动化管理和运行,重复性的任务都交给工具去完成,代码编译、规范校验、单元测试等,一次配置终生受用!他会按照你预先设定好的顺序自动执行各个任务。

关于 Grunt 的前世今生我就不做介绍了,这里只做使用介绍,也是项目开发中的部分经验积累和记录。

项目上线前,都要对网站进行各项测试,前端这部分我们首要考虑的是对图片的压缩,因为我用 PageSpeed 检测的时候,这部分直接飙红了,提示压缩后最大限度降低有效负荷,这都是在开发时,切图没有输出最优图片而导致。以前处理方式,或许会在工具里重新输出图片,还有 Yahoo - Smush.it 上传处理等……这些工具在很大程度上也帮我们不少忙,但难免在你开发的时候要多工具的来回切换,输出保存等。今天我们借助 Grunt 就能很轻松的完成这些任务,而且是在你不经意之间就会默默的完成,是不是很人性、很省心!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 安装插件
npm install grunt-contrib-imagemin --save-dev
// 加载插件(Gruntfile.js)
grunt.loadNpmTasks('grunt-contrib-imagemin');
// 配置插件(图片压缩)
imagemin: {
dynamic: {
options: {
optimizationLevel: 3 // png图片优化水平,3是默认值,取值区间0-7
},
files: [
{
expand: true, // 开启动态扩展
cwd: "images/", // 当前工作路径
src: ["**/*.{png,jpg,gif}"], // 要出处理的文件格式(images下的所有png,jpg,gif)
dest: "images/" // 输出目录(直接覆盖原图)
}
]
}
},

配置好之后,运行 grunt imagemin

1
2
3
4
5
6
Running "imagemin:dynamic" (imagemin) task
✔ images/about_1.jpg (already optimized)
...
✔ images/sprites-s4e83c27da3.png (saved 10.92 kB - 8%)
...
Minified 69 images (saved 255.81 kB)

在安装插件的时候,会出现 pre-build...failed 相关字眼的错误,就试试删除后,再重新安装。或者先安装 npm install jpegtran-bin --save-dev,应该是这个和 imagemin 有依赖关系。

其中 option 里还有一些高级配置,关于 optimizationLevel 也有详细的解释,有兴趣的可以详细阅读。grunt-contrib-imagemin

  1. Grunt 中文社区 - http://gruntjs.org/
  2. Grunt 官网 - http://gruntjs.com/