手擼一個npm包，安利一下duiba-sprite

## 背景

我所在組負責我司線上H5互動小遊戲的開發，其中一部分開發者負責皮膚的開發。大致流程為：視覺出psd，開發者切圖，開發者開發，開發者上傳皮膚代碼，運營驗收。這裡邊有個奇葩的動作：開發者切圖，為什麼讓開發者淪為切圖仔，這裡不再詳述。大部分開發者都習慣了自己切圖，在這裡面有個高頻的動作：幀動畫的素材製作。就是psd切出每一幀的動畫，然後用psd/拼圖軟體將每一幀圖片合成雪碧圖，工具不好用費時費力。

## duiba-sprite 因此誕生

通過該插件，可以將目錄下的圖片快速合成一張雪碧圖，且輸出你可能會需要的css文件。當前支持四種合成模式，後期會拓展更多需要的功能。

### 使用

### 參數說明

- -i 源文件輸入目錄（相對於cli的路徑），默認值：img

- -o 雪碧圖輸出目錄（相對於cli的路徑），默認值：和-i一致

- -m 目前支持四種模式（0 1 2 3），對應生成的css文件，默認值：0

如果是3張圖片的話，四種模式分別對應下圖：

## 如何擼一個npm包

### 目錄結構

其實隨便怎麼寫都可以的，但推薦如下：

- src

- package.json

- README.md

沒錯，這樣很熟悉，對吧。

### package.json

和大家平時開發中的一樣，這裡說兩點特殊的

### index.js

和大家平時開發一樣，完成一個立即執行的模塊即可。

### 如何像其它cli一樣，支持參數輸入

> 簡單的輸入我們自己可以處理，複雜的話，可以使用一個node模塊Commander.js。commander是一個輕巧的nodejs模塊，提供了用戶命令行輸入和參數解析強大功能，使用也很簡單。

### 發布

### 版本更新

如果需要發布新版本的npm包，記得修改package.json裡面的版本號，否則是發布不了的噢。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！