在线图片压缩
负责项目的朋友甩给我一个在线图片压缩网站（https://tinypng.com）
tinypng
意图很明显，但难道让我把图片一张张上传上去压缩下载吗？
我依然不是前端小白，即使肉眼一扫基本知道哪些图片需要处理，但这种重复劳动虽然管用但很“不健康”，对于自我成长，首先要有强烈的意愿去杜绝这种最低效的劳动。
我尝试去找网站相关的开发者栏目，但觉得麻烦，又要申请 key，又要 curl 调链接：
所以换我们前端比较熟悉的 gulp 入手。
gulp.js 脚本
项目是基于 vue-cli 的骨架，不想加入 webpack 配置增加复杂度，所以就回归到简单上手的 gulp 。
因为我们是有经验的开发（百度一下），所以很快就找到能用的模块：gulp-image
const gulp = require('gulp');
const image = require('gulp-image');
gulp.task('image', function () {
gulp.src('./fixtures/*')
.pipe(image())
.pipe(gulp.dest('./dest'));
});
当然如果嫌文档不太友好，也可以试下 gulp-imagemin。
具体如何使用就暂且省略，因为这些不是本文重点。
很好，我们不再 人工处理 这些问题，有了些“经验”的提升，但依然停留在使用 API 层面，任何一个人都能代替我们。
那么第二步，请在工作中 抽出时间来思考这些工具是怎么解决问题的，而不是止于寻找工具，调用它们完事。
自定义脚本
试问自己这些问题：
如果没有这些工具怎么办？我们肯定要自己写脚本。
但我们又不了解 png、jpg 之类格式的压缩算法，那怎么办？
这里就要提到，大多数“核心”的模块基本都被人实现过一遍了，而我们常用的工具都是对这些模块的再次封装，就好比小米手机对各个厂商的零部件整合一样。
但为什么有些工具那么“出众”呢？我认为就是他们创造了类似 miui 之类的玩意，让我们使用者用起来更加舒服，方便。
确定使用哪些基础库
好，现在开始分析上面 gulp 模块内部调用哪些“核心”库：
gulp-image 相关依赖：
// gulp-image "dependencies": { "gifsicle": "^5.0.0", "jpeg-recompress-bin": "^4.0.0", "mozjpeg": "^6.0.1", "pngquant-bin": "^5.0.2", ... }
gulp-imagemin 相关依赖：
// gulp-imagemin "dependencies": { "imagemin": "^7.0.0", ... }, "devDependencies": { "imagemin-pngquant": "^8.0.0", ... }, "optionalDependencies": { "imagemin-gifsicle": "^7.0.0", "imagemin-mozjpeg": "^8.0.0", "imagemin-optipng": "^7.0.0", "imagemin-svgo": "^7.0.0" }
我看了 imagemin-pngquant 和 imagemin-mozjpeg 相关依赖，发现和 gulp-image 用的一样，所以基于这些模块来作为我们自定义脚本的基础。
开始动手
这里我选择了 imagemin 相关的基础模块，还引入 node.js 相关文件操作，
//定义模块 const imagemin = require('imagemin') const imageminJpegtran = require('imagemin-jpegtran') const imageminPngquant = require('imagemin-pngquant') const path = require('path') const fs = require('fs')
定义一些基础信息
const imageRoot = path.resolve(__dirname, 'src/assets/images') const newImageDirtory = path.resolve(__dirname, 'tiny') const parseFilesPromise = []
定义主要方法// 创建目录 function createDir(dir) { if (!fs.existsSync(dir)) { fs.mkdirSync(dir) } } // 读取目录 function readDirtory(dir, newDir) { createDir(newDir)//创建目录 const dirData = fs.readdirSync(dir) for (let innerDir of dirData) { const totalDir = path.resolve(dir, innerDir) const childDir = path.resolve(newDir, innerDir) const stat = fs.statSync(totalDir) if (stat.isDirectory()) { // 递归子文件夹 readDirtory(totalDir, childDir) } else { // 解析文件 if (['.png', '.jpeg'].indexOf(path.extname(totalDir)) !== -1) { parseFiles(totalDir,childDir) } } } } // 准备解析文件 function parseFiles(originFile,destFile){ parseFilesPromise.push( imagemin([originFile], { destination: path.dirname(destFile), glob: false, plugins: [ imageminJpegtran(), imageminPngquant({ quality: [0.6, 0.8] }) ] }) ) }
最后执行：
readDirtory(imageRoot, newImageDirtory) Promise.all(parseFiles) .then(data => {}) .catch(err => { console.log(err) })
似乎没什么问题，但在实际中遇到了某些图片太大，使得模块解析报错，导致最后 promise.all break 掉。
优化
存放于 promise 队列中的 promise 对象额外封装一个 promise，用来解析中间出现的 error ：
parseFilesPromise.push( new Promise((resolve, reject) => { return imagemin([totalDir], { destination: path.dirname(childDir), glob: false, plugins: [ imageminJpegtran(), imageminPngquant({ quality: [0.6, 0.8] }) ] }) .then(data => { resolve(data) }) .catch(err => { reject(totalDir) }) }) )
在 promise.all 中，通过数组的 map 处理异常熔断，打印出错误资源文件路径：
Promise.all(
parseFiles.map(p => p.catch(error => console.log('解析错误：', error)))
)最后，手动处理下有问题的图片资源。
总结
目前我停留在“自己写脚本”这一步，用了 node.js 中一两个 api，也搭上了几个图片压缩的库。相比在线工具和直接 gulp，现在脚本的“机动性”好了不少，不再局限别人工具的束缚。
但真的就这样完了吗？
这里又要再提下一步：重构代码，达到像别人一样能给他们开箱即用的效果，这样自己才能算解决了“图片压缩”这个需求，甚至有必要，去研究下压缩的算法，或者试图写个 exe 之类的执行程序。
相信各位遇到过各种需求，需要解决各种难题，但真正“吃透”一个问题少之又少，而那些象牙塔的同学却在越走越高，我们的差距就是如此被拉大的，所以：好好学习，天天向上，与各位共勉。
转自https://www.toutiao.com/i6823001585723900420/?timestamp=1593354080&app=news_article&group_id=6823001585723900420&use_new_style=1&req_id=202006282221200100160322061541F1D2
喜欢这篇文章？欢迎打赏~~
