问题
在我现在负责的小程序中,每次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