duiba-sprite - npm explorer

背景

我所在组负责我司线上H5互动小游戏的开发，其中一部分开发者负责皮肤的开发。大致流程为：视觉出psd，开发者切图，开发者开发，开发者上传皮肤代码，运营验收。这里边有个奇葩的动作：开发者切图，为什么让开发者沦为切图仔，这里不再详述。大部分开发者都习惯了自己切图，在这里面有个高频的动作：帧动画的素材制作。就是psd切出每一帧的动画，然后用psd/拼图软件将每一帧图片合成雪碧图，工具不好用费时费力。

duiba-sprite 因此诞生

通过该插件，可以将目录下的图片快速合成一张雪碧图，且输出你可能会需要的css文件。当前支持四种合成模式，后期会拓展更多需要的功能。

$3

``// 全局安装并使用 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``

$3

- -i 源文件输入目录（相对于cli的目录），默认值：img
- -o 雪碧图输出目录（相对于cli的目录），默认值：和-i一致
- -m 目前支持四种模式（0 1 2 3），对应生成的css文件，默认值：0

!四种模式如下

背景

duiba-sprite 因此诞生

通过该插件，可以将目录下的图片快速合成一张雪碧图，且输出你可能会需要的css文件。当前支持四种合成模式，后期会拓展更多需要的功能。

$3

``// 全局安装并使用 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``

$3

!四种模式如下