grunt 自動化之壓縮圖片

遇到的問題

昨天閒來無事，想起了雅虎的前端優化十四條軍規，而後安裝了一個PageSpeed插件，檢測了下本身的網站，其中有一個優化圖片的建議，讓我比較感興趣。

從上圖能夠看到，按照谷歌的建議，壓縮後的大小減小31%，仍是比較可觀的。
其實這個問題，好久以前就遇到過（大概2年前），當時Google尚未PageSpeed這個Chrome插件，也是提示我優化圖片。後來用ps調整圖片的分辨率等信息，圖片大小也確實變小了。而後就沒有繼續思考這個問題。
使用ps優化圖片當然是一種解決辦法，可是實際項目中，圖片都是由美工製做的。有些圖片仍是會有壓縮的空間。若是把能壓縮的圖片用ps一個個打開，在優化的話，又會很麻煩，so，自動化

imagemin

用過了Grunt以後，再來使用imagemin灰常簡單。
執行命令npm install grunt-contrib-imagemin --save-dev安裝imagemin，以下圖

而後配置下Gruntfile.js。沒按照官網給出的Example config配置，找了個簡單的

module.exports = function (grunt) {
    grunt.initConfig({
        imagemin: {
            dist: {
                options: {
                    optimizationLevel: 3 //定義 PNG 圖片優化水平
                },
                files: [{
                    expand: true,
                    cwd: 'imagemin/',   // 圖片在imagemin目錄下
                    src: ['**/*.{png,jpg,jpeg}'], // 優化 imagemin 目錄下全部 png/jpg/jpeg 圖片
                    dest: 'imagemin/' // 優化後的圖片保存位置，覆蓋舊圖片，而且不做提示
                }]
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.registerTask('default', ['imagemin']);
};

最後，執行命令grunt，而後就能夠啦！有多少張圖片，均可以自動壓縮完成了。
壓縮以後的效果以下圖，而後在PageSpeed中就不會給我優化圖片的建議了~

參考鏈接

• page speed 百科
• PageSpeed Google Developers
• 前端優化十四條軍規
• imagemin github