linux 上使用 npm 安装 gifsicle 报错问题

Gifsicle 是一个处理 gif 图片的工具，在前端开发中，也经常利用它来进行 gif 图片的压缩工作。由于 Gifsicle 是用c写的，所以一般还需要使用 gifsicle-bin 来进行调用。

背景

在前端工程中，使用了 imagemin-gifsicle 在提交代码前对 gif 图片进行压缩。在本地使用（mac）是正常的，但在 ci 中对项目进行打包时，报了以下错误：

npm ERR! [email protected] postinstall: `node lib/install.js`

注：亟需解决的可以直接跳过，看最后面的解决方案

原因分析

尝试使用 docker 在本地复现 ci 环境进行打包，打出了更加详细的错误：

> [email protected] postinstall /home/jenkins/rttest/node_modules/gifsicle
> node lib/install.js

  ⚠ Response code 404 (Not Found)
  ⚠ gifsicle pre-build test failed
  ℹ compiling from source
  ✖ Error: Command failed: /bin/sh -c autoreconf -ivf
/bin/sh: 1: autoreconf: not found

    at Promise.all.then.arr (/home/jenkins/rttest/node_modules/bin-build/node_modules/execa/index.js:231:11)
    at process._tickCallback (internal/process/next_tick.js:68:7)

可以看到，在执行 /bin/sh -c autoreconf -ivf 报错了，原因是没找到 autoreconf 命令。autoreconf 在ci服务器上没有预装是能理解的，再看下为什么需要执行这条命令。
核心代码如下：

## gifsicle/lib/install.js
try {
    await bin.run(['--version']);
} catch (error) {
    const config = [
        './configure --disable-gifview --disable-gifdiff',
        `--prefix="${bin.dest()}" --bindir="${bin.dest()}"`
    ].join(' ');

    try {
        await binBuild.file(path.resolve(__dirname, '../vendor/source/gifsicle-1.92.tar.gz'), [
            'autoreconf -ivf',
            config,
            'make install'
        ]);
    } catch (error) {
        process.exit(1);
    }
}

可以看到，程序先执行了 bin.run()，执行报错才进行下面的逻辑，而下面代码的主要工作是对 vendor/source/gifsicle-1.92.tar.gz Gifsicle 源码的编译，也就是在这一步，报了找不到 autoreconf 的错误。

再看看bin.run()做了什么。

## gifsicle/lib/index.js
const path = require('path');
const BinWrapper = require('bin-wrapper');
const pkg = require('../package.json');

const url = `https://raw.githubusercontent.com/imagemin/gifsicle-bin/v${pkg.version}/vendor/`;

module.exports = new BinWrapper()
    .src(`${url}macos/gifsicle`, 'darwin')
    .src(`${url}linux/x86/gifsicle`, 'linux', 'x86')
    .src(`${url}linux/x64/gifsicle`, 'linux', 'x64')
    .src(`${url}freebsd/x86/gifsicle`, 'freebsd', 'x86')
    .src(`${url}freebsd/x64/gifsicle`, 'freebsd', 'x64')
    .src(`${url}win/x86/gifsicle.exe`, 'win32', 'x86')
    .src(`${url}win/x64/gifsicle.exe`, 'win32', 'x64')
    .dest(path.join(__dirname, '../vendor'))
    .use(process.platform === 'win32' ? 'gifsicle.exe' : 'gifsicle');

可以看到，借用了bin-wrapper工具，根据不同系统去下载对应的二进制文件，我所使用的 ci 环境是 linux x64，gifsicle-bin 版本为 5.1.0，手动拼装一下链接进行访问：https://raw.githubusercontent.com/imagemin/gifsicle-bin/v5.1.0/vendor/linux/x64/gifsicle
返回了404，更改版本为4.0.0测试，发现能够正常下载到文件：https://raw.githubusercontent.com/imagemin/gifsicle-bin/v4.0.0/vendor/linux/x64/gifsicle。

很明显，报错是因为下载不到需要的二进制文件，执行里本地编译的操作，找不到 autoreconf 工具，程序退出。

查看 issue

在 gifsicle-bin 仓库中翻着原因，发现作者在 v5.0.0 版本做了一句简单的描述，去除了过时的和不安全的二进制文件，估计 linux 二进制文件就在这个更新中被去除了。

去除之后，也并没有看到要重新添加回来的打算（issue 113），所以只能靠我们先使用一些方法规避掉这个问题。

解决方案

找到原因之后，就有了以下两个解决方案：

1. 将 gifsicle-bin 依赖版本降到 4+及以下；
2. 在 ci 服务器上，安装编译工具，命令如下：

## Linux:
$ sudo apt-get install libtool automake autoconf nasm
## OS X:
$ brew install libtool automake autoconf nasm