如何使用Grunt批量生成不同分辨率的图片

最近一直在Udacity上学习前段开发的课程，之前自己调整图片分辨率的方法一直都是傻傻的手动用图片处理软件来裁剪图片。没想到可以用Grunt的grunt-responsive-images插件就可以把图片生成自己想要的分辨率，而且还可以批量处理多个图片。下面就介绍一下具体的方法：

前提条件：必须安装Grunt ~0.4.0. 如何安装Grunt，可以参照用grunt搭建自动化的web前端开发环境-完整教程. 

1. 安装grunt-responsive-images插件

npm install grunt-responsive-images --save-dev

然后把更改Gruntfile.js文件，添加任务:grunt.loadNpmTasks('grunt-responsive-images')， 并注册grunt-responsive-images任务：grunt.registerTask('default', [ 'responsive_images']);

2. 安装GraphicsMagick 或者Imagemagick CLI，下面是简单配置好的Gruntfile.js文件，其中还另外安装了grunt-contrib-clean（用来清除指定的文件夹或文件），grunt-contrib-copy（复制文件），grunt-mkdir（创建文件夹）三个插件，安装步骤及Gruntfiles的配置和grunt-responsive-images一样：

简单配置后的Gruntfile.js

上图中sizes配置项中可以配置如下参数：

width - 图片宽度

height - 图片高度

name - 图片名称

suffix - 图片名后缀

quality - 图片质量（1-100）

separator - 用来分隔文件名的字符

files配置项中的参数：

expand - 图片是否需要扩展（true or false）

源文件（图片）- ['**.{gif,jpg,png}'] 表示所以后缀名为gif,jpg,png的图片

cwd （current working directory）- 当前工作的目录位置

dest - 目的目录位置

简而言之，上面Gruntfiles中的代码首先会通过clean插件清除当前目录images_src中名为images的文件夹 ==> 然后调用mkdir重新创建新的images文件夹 ==> 使用copy插件将images_src/fixed文件夹及其里面所有gif，jpg，png格式的图片复制到images文件夹下 ==>responsive_images会调用

3.按照上面的步骤配置好Gruntfiles后，然后在所在项目的目录下执行grunt命令就行了。下面是在命令行中运行的结果：

图片批量转换成功

图片转换成功后，可能还是有点大。那么为了进一步优化图片，我们可以将图片进行压缩处理。目前网上有不少支持在线压缩图片的网站，如色彩笔，图好快，compresspng等等。下面是使用compresspng.com压缩上传后的效果图：

图片压缩效果图

经过上面的批量分辨率转换和图片压缩，基本上能让网页中的图片加载速度有非常明显的提升，同时也节省了不少流量。