手搓一个 TinyPng 压缩图片的脚手架

最近做项目的时候, UI 妹子遇到需要使用 TinyJpg/TinyPng 压缩大量图片的需求, 但使用 TinyJpg/TinyPng 有一些问题:

问题

1. 上传下载全靠手动
2. 每次只能压缩 20 张

压缩一两张还可以接受, 但一次要压缩上百张, 就需要操作上传下载至少 5 次, 而且上传需要记住上次选择的位置, 下载后还是压缩包, 还需要解压, 再删除压缩包,

人生大部分时间就被这些重复且毫无技术含量的事情消耗完了

那咱作为程序员, 不就是解决这些重复且无技术含量的事情吗?

好, 说干就干!

实现

正好记得以前看过一个大佬封装过的 webpack 插件: JowayYoung/tinyimg-webpack-plugin: A webpack plugin for compressing image, 封装思路: 嗯，手搓一个TinyPng压缩图片的WebpackPlugin也SoEasy啦_JowayYoung谈前端 - SegmentFault 思否

但由于咱对 webpack 不太熟悉, 而最近刚写了一个脚手架: 打造属于自己的项目脚手架工具 | Henry, 所以就想改造成一个压缩图片的脚手架

基本思路:

1. 在需要压缩图片的文件夹中执行压缩命令
2. 获取该文件夹下所有图片文件(支持递归查找)
3. 依次上传压缩图片并下载
4. 输出信息

源码 在这里

安装

npm i tiny-photo-cli -g

使用

在需要压缩图片的文件夹下执行 tiny t 即可, 默认覆盖源文件; 如需要保留源文件, 请传入路径, 如: tiny t path

存在的问题

保留源文件压缩后路径会合并

保留源文件时, 如果有文件夹嵌套, 压缩后统一都放到压缩后的路径了, 无法保留源路径, 同名文件只保留一份

如压缩以下路径中的图片:

│image/
├─ 1.png
├─ test/
│  ├─ 1.png
│  └─ 2.png

在 image 文件夹下执行压缩命令: tiny t tiny-image 后路径为:

│image/
├─ tiny-image/
│  ├─ 1.png
│  └─ 2.png
├─ 1.png
├─ test/
│  ├─ 1.png
│  └─ 2.png