利用imagemin-gifsicle与gulp压缩本地gif

起因

项目起因是这样，我们做网站的时候经常遇到一些大型的gif，size超过4MB，无法传到服务器，即便可以传到服务器，但是用户打开一个4MB以上的gif也是受罪，所以萌生了压缩gif的想法。我希望的是gif文件小于4MB但是要尽量接近4MB。

注意，将gif的体积压缩到80%或更低的时候，画质会大幅度恶化，如果你不像我这样不在意画质的话，劝你还是别压缩了。

方案

gif压缩目前最好的免费方案是gifsicle，既可以将二级制版本安装到服务器，也可以在本地利用node.js压缩。我今天的方案是本地node.js压缩，这样可以保证效率，预览gif也快捷直观。

代码

package.json：

{
  "dependencies": {
    "gulp": "gulpjs/gulp.git#4.0",
    "imagemin": "^5.2.2",
    "imagemin-gifsicle": "^5.1.0"
  }
}

gulp.js：

解释：

1、涉及到的包非常简单，gulp、imagemin、imagemin-gifsicle。imagemin-gifsicle只有两个参数：{optimizationLevel: 3, colors: colorsNumber}，前者是优化等级，3是最佳优化，后面是图片的色彩值，取值是2~256，所以我需要刚好把图片压到4MB以下，又要让color值尽可能高。这需要动动脑子。
2、gulp版本使用4.0。希望看到本文的同学都使用4.0。
3、声明一个函数watchGif用来监听add事件。
4、内部声明一个递归函数，每次递归，只有色彩值有变化。逐渐减小色彩值，在min临时文件夹生成新的gif，判断该gif的大小，如果大于4MB，则继续减小色彩值，直到小于4MB，最后使用rename方法，将新的gif覆盖掉原gif，一切就OK了。

// Gulp 4.0版本

'use strict';

var gulp = require('gulp'),
    imagemin = require('imagemin'),
    imageminGifsicle = require('imagemin-gifsicle'),
    filesystem = require('fs');

function watchGif() {
    var watcher = gulp.watch('@(辛甜甜|芬达)/**/!(min)/*.gif');
    watcher.on('add', function(path) {

        var colorsNumber = 160; // 经测试，4.03MB的gif使用160的色彩值即可压到3.99MB，所以我就用160做为最高色彩值，足够用
        function minifyGif() {
            imagemin([path],
                path.match(/.+\\/)[0] + 'min',
                {use: [imageminGifsicle({optimizationLevel: 3, colors: colorsNumber})]}
            ).then(() => {
                filesystem.stat(path.match(/.+\\/)[0] + 'min' + path.match(/\\[^\\]+$/)[0], function (error, stats) {
                    var newSize = stats.size / 1024 / 1024;
                    if ( newSize > 4 ) {
                        // 在文件size比较大的时候，为节省时间，我会加大色彩值递减值，算法是MB数减3，差值乘以5再减4，比如：
                        // 9MB多的文件，递减26，8MB多的文件，递减21，7MB多的文件，递减16，
                        // 6MB多的文件，递减11， 5MB多的文件，递减6， 4MB多的文件，递减1
                        console.log('当前色彩值 ==> ' + colorsNumber + ' 当前尺寸 ===> ' + newSize + 'MB');
                        colorsNumber = colorsNumber - ((parseInt(stats.size / 1024 / 1024) - 3) * 4 - 3);
                        minifyGif();
                    } else {
                        filesystem.rename(path.match(/.+\\/)[0] + 'min' + path.match(/\\[^\\]+$/)[0], path);
                        console.log(path + '已经成功压缩到4MB以下');
                    }
                });
            });
        }

        filesystem.stat(path, function (error, stats) {
            if ( stats.size / 1024 / 1024 > 4 ) {
                minifyGif();
            }
        });

    });
}

gulp.task(watchGif);

进阶：右击gif，菜单中选择压缩该文件，采用“二分法”取color值

上面的方案有两个非常蠢的问题：

1、需要常开一个监听任务，其实没必要，因为超大gif总是极少数，所以我决定做一个右击文件，点击“minifyGif”，来压缩该gif，不再监听所有gif文件。

2、上面方案取到color值的方式是从一个高点往低点不断的尝试，这种方式显然是很蠢的，往往测试十几次才能获得最佳color值。现在我用“二分法”，经过8次尝试就可以找到最佳的color值，由于在这八次尝试中，可能有多个color值都是小于4MB的，其中最后一次小于4MB的那个color值就是最佳color值。

重写gulpfile.js

不要监听任务，改成直接执行的任务，process.argv 是Nodejs内部变量。

'use strict';
var gulp = require('gulp'),
    imagemin = require('imagemin'),
    imageminGifsicle = require('imagemin-gifsicle'),
    filesystem = require('fs');

 // 由于我的命令行写法类似于：gulp minifyTask -D:\...\abc.gif，
 // process.argv 是Nodejs内部变量，负责返回命令行所有参数，最后一个就是 -D:\...\abc.gif，也就是图片路径
var path = process.argv[process.argv.length-1].slice(1);

function minifyTask() {
    var colorsNumber = 128; // 由于此值范围是2~256，所以我取中点是128，即按照二分法取值
    var offset = 128; // 修正量
    var bestColorsNumber; // 最佳color值

    function minifyGif(isBestColorsNumber) {
        imagemin([path],
            path.match(/.+\\/)[0] + 'min',
            {use: [imageminGifsicle({optimizationLevel: 3, colors: colorsNumber})]}
        ).then(() => {
            filesystem.stat(path.match(/.+\\/)[0] + 'min' + path.match(/\\[^\\]+$/)[0], function (error, stats) {
                var newSize = stats.size / 1024 / 1024;

                console.log('当前色彩值 ==> ' + colorsNumber + ' 当前尺寸 ===> ' + newSize + 'MB');

                if (isBestColorsNumber !== true) {
                    offset = offset / 2;

                    if (offset !== 0.5) {
                        if ( newSize > 4 ) {
                            colorsNumber = colorsNumber - offset;
                        } else {
                            bestColorsNumber = colorsNumber;
                            colorsNumber = colorsNumber + offset;
                        }

                        minifyGif();
                    } else {
                        colorsNumber = bestColorsNumber;

                        minifyGif(true);
                    }
                } else {
                    filesystem.rename(path.match(/.+\\/)[0] + 'min' + path.match(/\\[^\\]+$/)[0], path);
                    console.log(path + '已经成功压缩到4MB以下，最合适的color值是' + colorsNumber);
                }
            });
        });
    }

    minifyGif();
}

gulp.task(minifyTask);

注册右键菜单项

给Windows系统的文件右键菜单注册新菜单项，本质是给注册表加项目，前端程序员对于这个工作恐怕是不太熟悉，事实上我也不熟，所以我没打算自己改注册表，于是随便找了一个右键菜单工具，比如这个ContextEdit，很古老的软件了，但够用，我就让它帮我改。

我给gif文件新增了一个菜单项：

Paste_Image.png

其中执行命令是cmd.exe /k "gulp minifyTask -^"%L^""，minifyTask就是gulpfile.js注册的任务函数。%L表示文件路径，-表示它作为参数使用，%L被一对^"包裹，也就是用双引号包裹参数，这是为了防范路径中有空格的情况。

用法

在局部安装了gulp的目录中或子目录中，随意右击一个超大gif，点击minifyGif菜单项，Windows会弹出窗口开始不断尝试压缩gif。很快，我们要的小gif就就绪了。

Paste_Image.png