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

问题

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

简单方案:git-commit

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

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

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

  • imagemin-linter:图片压缩插件

具体操作

目录

bef5450500ece00bf2ad60cc7943cc42.png

第一步:安装依赖

npm i -D husky lint-staged imagemin-linter
复制代码

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

837d1d37a13b02265f459c024824cac8.png

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

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

node_modules/
复制代码

示例:

8fc21da8dcc2304dafcbd435fd3a724c.gif

效果:

压缩前                        压缩后

021bd06a86022de4229dffb1ba252c5e.png0b94e61cc36495e4082e42da7dd6ad03.png

结语

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

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

  1. 删除图片资源文件夹

  2. git commit提交更改

  3. 撤销1的操作

  4. 再git commit提交更改

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


作者:ok同学
链接:https://juejin.cn/post/6910074402260385806

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值