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

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

# 问题

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

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

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

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

好，说干就干！

# 实现

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

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

基本思路：

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

源码 (opens new window) 在这里

# 安装

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