pngquant、libpng-dev、windows-build-tools（三个人的电影）

[dosicker]

此次事件的开端是由安装新依赖：

imagemin-pngquant

上面依赖基于：

pngquant-bin

然后又搞出了个：

libpng-dev

最后拖家带口出：

windows-build-tools

MD，全家都是沙雕玩意...

这一系列连锁反应牵引而出，经过一般苦战，算是摸清了这全家桶的安装模式流程及各个相关依赖的安装方式，同时这个问题可能仅出现在Window环境的兄弟们，其他的平台要是同样亦出现该情况，可以尝试按照本文的解决方案来走下试试...

别的不说，开捶！

先上个图：

看到这个一串红的人都傻了...
不过，别慌，先来看一串错误：

Error: pngquant failed to build, make sure that libpng-dev is installed
at Promise.all.then.arr (W:\WorkSpace\WxApp\WePY\Auditor\node_modules\bin-build\node_modules\execa\index.js:231:11)
at process._tickCallback (internal/process/next_tick.js:68:7)

这里一段可以看出当前'pngquant'依赖并非无法安装，而是缺少一个叫'libpng-dev'的东西来构建安装'pngquant'，所以导致安装程序执行抛出了红色...

那么这个 libpng-dev 又是啥玩意呢？他该怎么安装呢？

首先：

1、libpng-dev：它是图片压缩工具pngquant这个依赖包必备的一个基础二进制可执行程序.exe文件，用来构建成pngquant依赖包的，通常开发及普通都基本用不上，但是不排除部分沙雕项目或者接盘过来的...咳咳，说远了，总之，它就是一个必备的基础依赖文件；

2、有人会说，那安装一下 libpng-dev 不就万事大吉了吗？那你看图：



怎么说？绝望么？压根就没有这个包给你下哦~

在经过一番折腾之后，查阅了些许资料，又被引导至一个叫 windows-build-tools 的东西上面去了，先看下相关资料的说明好吧？

相关资料查阅：

1、一次 node_modules 安装失败的排查之旅 （这个同仁他排查的问题点基本是在网络上面，而我的排查过程发现并不存在这方面的问题，文章里面他有详细写到，关于 pngquant-bin 这个依赖包一系列执行过程及同 libpng-dev 的底层连接源码剖析部分，而我缺失的也并不在这一块，但是所说的执行流程确实是这么个意思）

2、npm install is broken by pngquant-bin dependency #46（imagemin-pngquant GitHub官方的问题帖下有位外国友人贴出来说：看下图）

npm install imagemin-pngquant@5.0.1 --save
npm install pngquant-bin@3.1.1 --save```

（虽然但是，就不再浪费兄弟们的时间去试了，这个坑我帮在座的各位已经踩完了，压根就不是版本或者加了 pngquant-bin 这个依赖去安装的原因，至少对我这边来说绝不是...同时这几个：

①、issues #46

②、ReactJS: Pngquant failed to build, make sure that libpng-dev is installed

③、Error with npm update: pngquant binary does not seem to work correctly

他们在说的所有相关问题都不用再去浪费时间看了，都帮家人们试过了...o(╥﹏╥)o）

最后，我他喵终于发现了盲点：

1、解决 Windows 系统使用 NPM 时遇到的各种问题

2、pngquant failed to build, make sure that libpng-dev is installed 问题 以及

3、pngquant failed to build, make sure that libpng-dev is installed

这几篇文章后，发现一个叫 windows-build-tools 的东西要装，直接：

（切记！切记！切记！在此操作之前，检查一遍设备的代理‘VxN是否挂载、网络是否顺畅’，因为他可能会连接海外服务器，及下载几个G的文件）

打住，打住，此处更新一波，更新时间：2023.11.07，关于这个windows-build-tools的安装过程，并非如此简单，需要详看：来执行本文的后续操作，或者无需其他操作...

点我跳转查看该处理方式

npm install -g windows-build-tools

执行之后，终端显示出绿色的：

----------------------------- Python ----------------------------- 
Successfully installed Python 2.7/x.x

时，他就会卡在那里，但你先不要急着 Ctrl+C&Y，再等个一分钟，然后再 Ctrl+C&Y

此时按电脑Win键，你可能会看到：

没错！这就是到成功路上99.99%进度的标识啦~！

然后，回去再重新执行：

npm i imagemin-pngquant

开饭，上菜！

其实有人会发现，这个中间人 libpng-dev 同样也装好了？

是的没错！在执行 npm install -g windows-build-tools 时，一并给安装上了，并且 libpng-dev 依赖所需的构建/执行支持就是 windows-build-tools 这个鬼东西提供，也就是说，这里面 pngquant-bin 也好、imagemin-pngquant 也罢，大多数的问题点，都基本浮动该依赖的基础上，所以把这个安装好了，其相关的也能好装很多~

PS：个人建议文中的几个依赖

1、imagemin-pngquant

2、pngquant-bin

3、libpng-dev

全部给扔进.gitignore忽略列表去（但这样子做是真的很鸡肋~最好的做法还是少用这几个玩意为妙，至此也是：听我说，谢谢你，因为有你，wepy），避免全员踩坑！