使用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/