前端项目利用npm第三方库配置自动化压缩图片

本文主要从0讲解如何在自己的项目中配置自动化压缩图片，注意，tinypng每月每个邮箱500张免费压缩图片。我用的项目public文件夹从211MB压缩到134MB，还是在部分图片未压缩的情况下。全部压缩预计会120+Mb

下载配置husky（以下所有命令行用管理员身份）

安装husyk
npm install husky -D
修改husky配置
npm pkg set scripts.prepare="husky install"
npm run prepare
添加pre-commit
npx husky add .husky/pre-commit "npx lint-staged"
git add .husky/pre-commit
以上命令运行后有很多提示，不报错就不用管

安装lint-staged

下载
npm install lint-staged
配置lint-staged，找到根目录下 .lintstagedrc.json
在里面添加这一行 
"*.{png,jpg,jpeg}": "tiny-files --key"

申请tinypng的key

tinypng网址

进入以后，点击这里申请，然后输入邮箱，在邮箱里确认，并打开链接。

激活key，后续会使用这个key

下载tiny-files

npm i tiny-files
将刚才申请的key设置为本地key，也可以在上面的lint-staged里面配置改成这样，这样以后其他人也可以用
cl-tinypng --save 刚才tinypng申请的key


如果你想手动压缩，压缩当前目录
cl-tinypng --key xxxkey
// 如果已经配置过了本地key，可以使用如下方式
cl-tinypng --key

测试自动化压缩

成功的效果是，每当我们commit就会自动检测暂存区图片，并且压缩里面的图片，我这里重复调用命令的失败，需要修改husky里的premmit文件

如果重复调用有几种解决方法（针对.husky/precommit）： 1.你的 npx lint-staged有多个（一定要确保只有一个命令） 2.如果只剩一个还不行，在npx lint-staged前加上这行代码

exec >/dev/tty 2>&1

像这样就是成功了