下载地址 : https://github.com/Lrdcq/xgfe-app-sketch-exporter
Tag : 当前版本 0.1.0

发布记录

- 2017.12.01 第一版0.1.0版本，实现基本功能

安装

保证mac上正确安装Sketch非AppStore版本(建议版本>=46)。
下载本仓库文件，双击安装XGAPPSketchExporter.sketchplugin即可。

使用

选中界面中的图层元素，Control+Option+E或者从Plugins菜单中选择Export，输入导出资源名字即可。
每一个sketch文件第一次使用导出功能时，需要导出项目目录和类型。目录请指向：

- Android：项目对应的res目录
- iOS：项目对应的Assets.xcassets目录

实现详解

本工具实现分为3个主要部分：

1. 用户配置：现在以sketch文件为单位，对输出进行配置，主要配置的是输出目标文件夹，输出资源平台（android，ios），输出图像size列表。这个配置现在是以NSUserDefaults的形式储存在了key = XGResourcesExporterConfig_ + filePathHash()下，后续版本考虑会把项目配置和sketch文件文件解绑。另外，配置界面也是这个部分提供的，依赖工具配置。

2. 工具配置：代码中的config.js，配置有哪些资源平台，和每个平台到底有哪些size可选，每个平台到底如何执行输出。

3. 导出器：耦合前两部分，真正执行导出。

程序的UI是通过NSAlert弹出的native界面，并没有什么高深的技术。功能实现主要依赖document的saveArtboardOrSlice:toFile:方法，有可能会有一些版本兼容问题，暂时能确定的是46-now是没问题的。

工具配置

详解config.js，本工具建议的使用方式就是通过fork后修改config.js，根据团队实际情况调整本工具的输出配置并分发给队友，以达到结合团队的最方便的工作模式。

比如我们来看ios的配置：

{
  id : 2,
  platform : 'iOS',
  sizelist : [
  {
    id : 1,
    name : '@1x',
    scale : 0.5,
    file : '/{name}.imageset/{name}@1x.png'
  },
  {
    id : 2,
    name : '@2x',
    scale : 1,
    file : '/{name}.imageset/{name}@2x.png'
  },
  {
    id : 3,
    name : '@3x',
    scale : 1.5,
    file : '/{name}.imageset/{name}@3x.png'
  }
  ],
  didExport : function(context, exportConfig) {
    //输出Contents.json文件
    //...
  }
}

每个平台配置对象至少包含以下字段：

- id：唯一id，请手动保障其唯一不变。
- platform：平台展示在界面上的名字。
- sizelist：可导出size的列表。

每个size对象至少包含以下字段：

- id：唯一id，还是请手动保障其唯一不变。
- name：展示在界面上的名字。
- scale：实际执行导出操作时，应用到MSExportRequest对象上的缩放倍率。
- file：实际执行导出操作时，串在项目资源路径后的文件路径。其中{name}是用户输入文件名，可替换。

这两个维度在配置界面上很明显：



另外平台配置还有三个可选的回调，分别是：

- willExport(context, exportConfig)：导出前会执行，比如需要做一些目标文件的准备处理。
- didExport(context, exportConfig)：导后前会执行，比如上面ios平台生成Contents.json就是这一步做的，主要做收尾操作。
- catchError(context, exportConfig, error)：当整个执行抛出异常后，包括上面两个回调，会回调到这里。可以做一些失败后的回滚等东西。（现在还没做过）

其中回调中的exportConfig是导出是对配置的耦合，包括以下字段：

- platform：实际导出平台的对象
- sizes：实际导出选择size的对象列表
- fileName：用户输入的输出文件名
- filePath：项目配置的输出目录
- slice：输出目标的MSExportRequest对象

说到MSExportRequest对象，可以参看https://github.com/abynim/Sketch-Headers/blob/master/Headers/MSExportRequest.h里面不少配置都没用上（不想做大而全的东西）。如果有需要可以在willExport做预处理。

应该通过以上配置，可以自定义出按实际需求需要的工具配置了。

如果感觉还是需要在工具中添加一些什么可配置内容，请直接联系我。