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 // 配置表
则可以这样编写配置表:
保存配置表后则可以使用,例如 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