最近一直在Udacity上學(xué)習(xí)前段開(kāi)發(fā)的課程，之前自己調(diào)整圖片分辨率的方法一直都是傻傻的手動(dòng)用圖片處理軟件來(lái)裁剪圖片。沒(méi)想到可以用Grunt的grunt-responsive-images插件就可以把圖片生成自己想要的分辨率，而且還可以批量處理多個(gè)圖片。下面就介紹一下具體的方法：
前提條件：必須安裝Grunt ~0.4.0. 如何安裝Grunt，可以參照用grunt搭建自動(dòng)化的web前端開(kāi)發(fā)環(huán)境-完整教程.?
1. 安裝grunt-responsive-images插件
npm install grunt-responsive-images --save-dev
然后把更改Gruntfile.js文件，添加任務(wù):grunt.loadNpmTasks('grunt-responsive-images')， 并注冊(cè)grunt-responsive-images任務(wù)：grunt.registerTask('default', [ 'responsive_images']);
2. 安裝GraphicsMagick 或者Imagemagick CLI，下面是簡(jiǎn)單配置好的Gruntfile.js文件，其中還另外安裝了grunt-contrib-clean（用來(lái)清除指定的文件夾或文件），grunt-contrib-copy（復(fù)制文件），grunt-mkdir（創(chuàng)建文件夾）三個(gè)插件，安裝步驟及Gruntfiles的配置和grunt-responsive-images一樣：
上圖中sizes配置項(xiàng)中可以配置如下參數(shù)：
width - 圖片寬度
height - 圖片高度
name - 圖片名稱(chēng)
suffix - 圖片名后綴
quality - 圖片質(zhì)量（1-100）
separator - 用來(lái)分隔文件名的字符
files配置項(xiàng)中的參數(shù)：
expand - 圖片是否需要擴(kuò)展（true or false）
源文件（圖片）- ['**.{gif,jpg,png}'] 表示所以后綴名為gif,jpg,png的圖片
cwd （current working directory）- 當(dāng)前工作的目錄位置
dest - 目的目錄位置
簡(jiǎn)而言之，上面Gruntfiles中的代碼首先會(huì)通過(guò)clean插件清除當(dāng)前目錄images_src中名為images的文件夾 ==> 然后調(diào)用mkdir重新創(chuàng)建新的images文件夾 ==> 使用copy插件將images_src/fixed文件夾及其里面所有g(shù)if，jpg，png格式的圖片復(fù)制到images文件夾下 ==>responsive_images會(huì)調(diào)用
3.按照上面的步驟配置好Gruntfiles后，然后在所在項(xiàng)目的目錄下執(zhí)行g(shù)runt命令就行了。下面是在命令行中運(yùn)行的結(jié)果：
圖片轉(zhuǎn)換成功后，可能還是有點(diǎn)大。那么為了進(jìn)一步優(yōu)化圖片，我們可以將圖片進(jìn)行壓縮處理。目前網(wǎng)上有不少支持在線(xiàn)壓縮圖片的網(wǎng)站，如色彩筆，圖好快，compresspng等等。下面是使用compresspng.com壓縮上傳后的效果圖：
經(jīng)過(guò)上面的批量分辨率轉(zhuǎn)換和圖片壓縮，基本上能讓網(wǎng)頁(yè)中的圖片加載速度有非常明顯的提升，同時(shí)也節(jié)省了不少流量。
