https://github.com/qmui/qmui-images-distribution

适用于 QMUI 图片管理方式的辅助工具，自动把 sketch 导出的切片按 QMUI 要求改名并分发到各个目录
https://github.com/qmui/qmui-images-distribution

Last synced: 6 days ago
JSON representation

适用于 QMUI 图片管理方式的辅助工具，自动把 sketch 导出的切片按 QMUI 要求改名并分发到各个目录

• Host: GitHub
• URL: https://github.com/qmui/qmui-images-distribution
• Owner: QMUI
• License: mit
• Created: 2016-07-19T13:35:57.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-07-19T13:59:16.000Z (over 8 years ago)
• Last Synced: 2024-10-03T03:51:31.154Z (about 2 months ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 12
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# qmui-images-distribution

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

## Installation

```shell

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

```

## Usage

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

```shell

images

├── commonImages

├── commonImages_2x

├── icons

├── icons_2x

├── mobile

├── mobile_2x

├── mobile_3x

├── qmui-images-distribution // 本工具的目录

└── config.json              // 配置表

```

则可以这样编写配置表：

```json

{

  "comment" : "图片目录名与关键字的配对",

  "icon": "icons",

  "common": "commonImages",

  "mobile": "mobile"

} 

```

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

```shell

gulp --d icon 

```

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

```shell

gulp --d mobile

```

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

```shell

gulp help

```