【第1509期】阿里imgcook 体验版发布

前言

在这个月D2会议上见识到这个，也在【第1501期】浏览器往返缓存（Back/Forward cache）问题的分析与解决的底部透露过这个，今天大家可以更全面的了解下这个工具。今日早读文章由淘宝@白日梦先生投稿分享。

在淘宝这个曾经孕育出天猫、支付宝等庞然大物的平台，丰富精彩，包罗万象，我们是淘宝前端团队；我们的使命是用技术为体验提供无限可能，效率和质量的极致追求我们一直在路上……

正文从这开始～～

经过淘宝前端团队内部近一年半的打磨，imgcook 迎来了社区体验版发布。

imgcook 是什么？

imgcook 是专注以各种图像（Sketch/PSD/静态图片）为原材料烹饪的匠心大厨，通过智能化手段将各种图像一键生成可维护的 UI 视图代码，期望此 imgcook (图像大厨) 未来能够成为一位 P5 级别的重构工程师，能切实提高开发的开发效率，并助力开发、设计师、测试的高效协作，我们期望做到：

• 100% 还原【设计师再也不用还原走查了】

• 100% 兼容【测试再也不用适配样式了】

• 一键上线【开发再也不用切图写样式了】

愿景：能够高度还原各种图像，释放 UI 开发生产力，让你关注更具挑战性的事情！

为什么做 imgcook？

对于 UI 还原而言，早在很多年前，对于类似的从设计稿中还原生成静态 UI 场景的解决方案也都涌现过，比如一些设计稿标注工具（如Marketch），又或者说目前的一些可视化建站平台也都能够在搭建完后直接产出线上页面，为什么做 imgcook，它的优势体现在哪？

我们回到 UI 还原主题上，当我们说图像生成代码的时候，我们关心的不仅仅是生成 UI 的还原度，也关心生成的代码是否合理、可维护，如果生成的代码属于不可读不可维护的快餐代码，开发使用上再对其进行二次开发就会显得极为艰难，而往往后者的难度相比前者更甚，如果需要在生产环境中使用，这个问题就无法避免。

对此，imgcook 的定位就在于解决 UI 还原以及生成可维护代码的问题。

1. 设计稿无约束+高还原

对于 UI 还原，目前比较常见的场景是从设计工具（比如Sketch、PS）入手。但比较不如意的是，设计师交付的设计稿里所带的结构化信息往往是杂乱无章的，如果需要精确得解析一个设计稿里某个模块的结构化数据，往往又需要跟设计师进行合作，规范设计稿中的设计以及制定一些约束来进行使用，这就变相要求设计师用设计的方式来写试图代码，一定程度上增加了设计师的成本。

imgcook 为了解决这个问题，目前在对设计稿的解析上做了一些智能化的处理，去除了对设计师图层设计规范这块的依赖，当然 imgcook 也提供了一些官方的设计稿规范建议可以让还原效果更符合预期。

2. 生成可维护代码

对于可维护性代码的问题，imgcook 会对还原后的 UI 在代码层面上生成目前使用比较广泛的 Flexbox 布局以及相对定位布局，在一些自定义的命名上（比如样式命名），imgcook 也会根据开发者的习惯生成更加人性化的命名。

如何使用 imgcook？

imgcook 目前对外的体验版里，暂时只开放了针对 Sketch 设计稿的还原插件。

1. 插件导出模块

在使用 Sketch 插件进行还原的时候，可选中一个模块外层的容器节点（画板、Group或者Symbol）来进行导出。

2. 粘贴还原

模块导出完毕后，可前往 imgcook 平台进行粘贴还原。

3. 保存查阅代码

检查模块还原 UI 以及左侧的布局结构无误后，可进行保存->查阅代码，目前对外的体验版中 imgcook 提供了几种可选择的 DSL 进行代码生成，对于每个 DSL，可在右侧的 playground 里查看具体运行的效果。

什么场景下使用 imgcook？

imgcook 的诞生源于业务，也最终服务于业务。

• 场景使用层面上，imgcook 倾向于以页面中的模块级别图文组合的模块。

• 技术层面上，imgcook 对于支持 Flexbox 布局类型的 DSL 都会有一个比较好的支持，目前 imgcook 提供了四种 DSL，接下来也还会陆续提供更多。

适合使用 imgcook 的场景例子

更多信息

imgcook下载：https://imgcook.taobao.org/

imgcook使用指南：https://imgcook.taobao.org/docs

imgcook 目前还处于体验版，会存在一些不确定性的还原 badcase 以及代码生成不合理的 badcase，可以通过下方提issue：https://github.com/taobaofed/imgcook/issues

关于本文
作者：@波本
原文：http://taobaofed.org/blog/2019/01/07/imgcook/

最后，为你推荐

欢迎投稿到前端早读课，投稿邮箱：[e-mail] 或 早读君微信:zhgb_f2er