使用grunt來無損壓縮圖片

作為一個前端工程師，或者web開發工程師，圖片是你無法忽視的一個東西，沒有一本優化方面的書不會提及圖片的優化。

pagespeed里面，首當其沖的也是提示你的圖片需要優化。

之前有做過很多嘗試，處理png圖片等，可以查看以前的博客：優化png圖片的歷程

但是之前的方法有兩個問題：

1、主要是優化PNG圖片

2、效率低下，不適合批量操作

為了解決上訴問題，現在使用一個新的方法去批量壓縮圖片。

這個方法就是，噔噔噔噔，Grunt-contrib-imagemin

操作步驟如下：

1、首先你得有nodejs環境，如果你沒有，請參考：https://nodejs.org/

2、然后打開node.js command prompt

3、通過npm安裝grunt，如果你沒有grunt的話。要安裝，請參考：http://www.gruntjs.net/

4、然后新建一個文件夾，我的個人看法是，你所新建的這個文件夾將作為你壓縮圖片的一個寄存地，也就是一個緩存區。當你要壓縮某些圖片的時候，可以把圖片復制過來，然后運行一下壓縮命令即可。而不用每次都在你的項目目錄中安裝imagemin

安裝Grunt-contrib-imagemin，需要系統中已經安裝grunt的，所以你首先要參考第3條。

輸入了安裝imagemin的命令后，會從遠程服務器中下載這個包到你的新建的目錄中了。

5、新建Gruntfile.js文件，打開你剛才新建的目錄，我這里是gruntImgmin

然后在這個根目錄中，新建上述js文件，然后新建grunt任務：

    module.exports = function (grunt) {  
        'use strict';  
        grunt.initConfig({  
            imagemin: {  
                /* 壓縮圖片大小 */  
                dist: {  
                    options: {  
                        optimizationLevel: 3 //定義 PNG 圖片優化水平  
                    },  
                    files: [  
                           {  
                        expand: true,  
                        cwd: 'images/',  
                        src: ['**/*.{png,jpg,jpeg}'], // 優化 img 目錄下所有 png/jpg/jpeg 圖片  
                        dest: 'images/' // 優化后的圖片保存位置，覆蓋舊圖片，并且不作提示  
                        }  
                        ]  
                    }  
                },  
                });  
        grunt.loadNpmTasks('grunt-contrib-imagemin');  
        grunt.registerTask('img', ['imagemin']);  
    };  

上面的任務中，我是把原圖片文件夾和目標文件夾寫成了同一個，也就是要覆蓋原圖片，如果你不想這樣，可以自己更改路徑就可以了。

6、把圖片放在相應的文件夾之后，在nodejs的命令行中輸入命令：

7、文件對比

壓縮前總文件大小為535k，壓縮后為508k，減少了47k。

因為壓縮的圖片大部分為jpg，所以壓縮率可能不是特別高，當png比較多，或者整體文件比較多的時候，這種差異會更大。減少了47k已經減少了很多，為你的網頁的性能呢個又優化了一步。

參考：

http://www.zfanw.com/blog/gruntjs-optimize-image-size-loseless.html

http://www.gruntjs.net/

https://nodejs.org/