背景
我所在组负责我司线上H5互动小游戏的开发,其中一部分开发者负责皮肤的开发。大致流程为:视觉出psd,开发者切图,开发者开发,开发者上传皮肤代码,运营验收。这里边有个奇葩的动作:开发者切图,为什么让开发者沦为切图仔,这里不再详述。大部分开发者都习惯了自己切图,在这里面有个高频的动作:帧动画的素材制作。就是psd切出每一帧的动画,然后用psd/拼图软件将每一帧图片合成雪碧图,工具不好用费时费力。
duiba-sprite 因此诞生
通过该插件,可以将目录下的图片快速合成一张雪碧图,且输出你可能会需要的css文件。当前支持四种合成模式,后期会拓展更多需要的功能。
使用
// 全局安装并使用
npm install duiba-sprite -g
duiba-sprite -i img -o img -m 0
// 本地安装使用
npm install duiba-sprite -D
npx duiba-sprite -i img -o img -m 0
参数说明
- -i 源文件输入目录(相对于cli的目录),默认值:img
- -o 雪碧图输出目录(相对于cli的目录),默认值:和-i一致
- -m 目前支持四种模式(0 1 2 3),对应生成的css文件,默认值:0