背景

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

duiba-sprite 因此诞生

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

使用

    // 全局安装并使用npm install duiba-sprite -gduiba-sprite -i img -o img -m 0// 本地安装使用npm install duiba-sprite -Dnpx 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 nodefunction 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里面的版本号，否则是发布不了的噢。