适用于 QMUI 图片管理方式的辅助工具,自动把 sketch 导出的切片按 QMUI 要求改名并分发到各个目录
JavaScript
Latest commit 790d980 Jul 19, 2016 @kayo5994 kayo5994 补回 .svnignore
Permalink
Failed to load latest commit information.
source 提交到 Github Jul 19, 2016
.eslintrc.js 提交到 Github Jul 19, 2016
.gitignore 增加 .gitignore Jul 19, 2016
.npmignore 提交到 Github Jul 19, 2016
.svnignore 补回 .svnignore Jul 19, 2016
LICENSE 提交到 Github Jul 19, 2016
README.md 提交到 Github Jul 19, 2016
config.json 提交到 Github Jul 19, 2016
gulpfile.js 提交到 Github Jul 19, 2016
package.json 补回 .svnignore Jul 19, 2016

README.md

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