300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > ios 上传图片失败 小程序_小程序图片自动压缩配置

ios 上传图片失败 小程序_小程序图片自动压缩配置

时间:2024-07-10 16:45:04

相关推荐

ios 上传图片失败 小程序_小程序图片自动压缩配置

问题

在我现在负责的小程序中,每次ui变更都需要引入新的图片,为了控制小程序体积,都需要先把图片压缩了再放到项目中,但是每次都要手动压缩一次,太麻烦了。所以我想能否在项目加入图片的时候,自动的对加入的图片进行压缩。同时在我的前端组中,对于小的开发项目,这些琐碎的事没有得到关注。为了解决以上问题,我使用了下面的方案。

简单方案:git-commit

借助git hook的能力,在每次提交前对新增的文件进行判断,如果是图片则进行压缩。为此使用了以下插件 husky + lint-staged + imagemin-linter

husky:Git hooks 工具,支持在git操作的钩子函数添加我们自定义的处理

lint-staged:在git暂存文件上运行linters的工具,方便筛选出图片支援

imagemin-linter:图片压缩插件

具体操作

目录

第一步:安装依赖

npm i -D husky lint-staged imagemin-linter

复制代码

第二步:添加压缩配置package.json

"husky": { "hooks": {"pre-commit": "lint-staged" } }, "lint-staged": { "*.{png,jpeg,jpg,gif,svg}": "imagemin-linter" },

复制代码

第三步:添加 .gitignore文件,忽略提交npm安装的包

node_modules/

复制代码

示例:

效果:

压缩前 压缩后

结语

此方案比较简单,能够解决手动压缩的麻烦,同时满足了开发的需求:自动压缩 + 只压缩一次 。同时可以把这个添加到项目模板中,开发新项目时能减少部分工作量。

tip:对于已有的项目,可以分四步处理

删除图片资源文件夹

git commit提交更改

撤销1的操作

再git commit提交更改

当然如果有工具能够直接批量压缩,再替换原项目图片,这样更好。

作者:ok同学

链接:/post/6910074402260385806

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。