qmui-images-distribution

自动把 sketch 导出的切片按 QMUI 要求改名并分发到各个目录。由于 sketch 中输出的切图通常是按照 xxx.png，xxx_2x.png，xxx_3x.png 这样输出，而 QMUI 框架中要求多倍图的文件名相同，即不带"_2x"或“_3x”这类后缀，并放置到不同的目录中，因此造成不便，这个工具帮助把切图重命名并集中分发到对应的目录中。

Installation

npm install --save-dev qmui-images-distribution 

Usage

第一次使用时应该先运行一次 gulp init，这个任务会帮助创建配置表，配置表会放置在 qmui-images-distribution 的上一层目录，然后需要按照图片目录创建对应的字典，例如项目中图片目录结构如下：

images
├── commonImages
├── commonImages_2x
├── icons
├── icons_2x
├── mobile
├── mobile_2x
├── mobile_3x
├── qmui-images-distribution // 本工具的目录
└── config.json              // 配置表

则可以这样编写配置表：

{
  "comment" : "图片目录名与关键字的配对",
  "icon": "icons",
  "common": "commonImages",
  "mobile": "mobile"
} 

保存配置表后则可以使用，例如 sketch 中切图输出共有 close.png，close_2x.png 两张图片，需要分别放置到 icons 和 icons_2x 两个目录中，则可以先把切图放置到 qmui-images-distribution/source 中，然后执行以下命令：

gulp --d icon 

同理，如果有三张切图 logo.png，logo_2x.png，logo_3x.png 需要分别放置到 mobile，mobile_2x 和 mobile_3x 三个目录中，则可以这样操作：

gulp --d mobile

在 qmui-images-distribution 目录下运行以下命令可以查看完整的使用菜单

gulp help