背景
我所在组负责我司线上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
如果是3张图片的话，四种模式分别对应下图：
如何撸一个npm包
目录结构
其实随便怎么写都可以的，但推荐如下：
- src
- package.json
- README.md
没错，这样很熟悉，对吧。
package.json
和大家平时开发中的一样，这里说两点特殊的
// 1.指明当前模块的命令和要执行的入口文件，例如：
"bin": {
"duiba-sprite": "./src/index.js"
}
// 2.当前模块依赖的其他模块，例如：我依赖的一个node图片处理库
"peerDependencies": {
"images": "^3.0.1"
}
index.js
和大家平时开发一样，完成一个立即执行的模块即可。
// 注意点，头部必须指明当前模块需要的运行环境
#!/usr/bin/env node
function start() {
console.log('duiba-sprite 是一个快速生成雪碧图和对应css文件的模块')
}
start()
如何像其它cli一样，支持参数输入
// 当你在控制台输入 npx duiba-sprite -i img -m 1
其实输入的命令为 node src/index.js -i img -m 1
// node会将该命令以空格为分隔符转换为数组，第一项为”node”可执行路径，第二项为入口文件js的完整路径，我们直接去掉即可
const args = process.argv.slice(2);
// 拿到用户输入的值args后该怎么处理，就不用说了
注意一点，所有的输入都会被转为字符串
简单的输入我们自己可以处理，复杂的话，可以使用一个node模块Commander.js。commander是一个轻巧的nodejs模块，提供了用户命令行输入和参数解析强大功能，使用也很简单。
发布
1.到npmjs.com注册账号
2.推送模块 npm publish
3.推送的时候会让你输入账号和密码（第一次推送）
版本更新
如果需要发布新版本的npm包，记得修改package.json里面的版本号，否则是发布不了的噢。
