起因
项目起因是这样，我们做网站的时候经常遇到一些大型的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文件新增了一个菜单项：
其中执行命令是cmd.exe /k "gulp minifyTask -^"%L^""，minifyTask就是gulpfile.js注册的任务函数。%L表示文件路径，-表示它作为参数使用，%L被一对^"包裹，也就是用双引号包裹参数，这是为了防范路径中有空格的情况。
用法
在局部安装了gulp的目录中或子目录中，随意右击一个超大gif，点击minifyGif菜单项，Windows会弹出窗口开始不断尝试压缩gif。很快，我们要的小gif就就绪了。
