我用了imgcook，感受一言难尽

---

title: imgcook的出现，让切图仔何去何从？
category: Web
tag: imgcook
date: 2019-07-12

---

主标题：我用了imgcook，感受一言难尽
副标题：imgcook的出现，让切图仔何去何从？

副标题： imgcook学习笔记

imgcook是什么

由设计稿一键智能生成代码的大厨

官网：https://imgcook.taobao.org/ 还提供了视频介绍。

这个工具是一键生成代码的工具，用户提供 sketch psd 设计稿，机器自动生成静态页面代码。

类似的工具见过很多，但都被历史遗忘了，这次imgcook能不能打？结论，还真能打，好的超出预期。

19年3月份的时候imgcook开始支持 ps photoshop 版的插件，截至到现在已经是 1.0.6了。 我司出psd设计稿，就有了这篇文章。

如何使用

使用非常简单：

1. 点击链接下载插件，解压安装，如果遇到问题参考这里https://imgcook.taobao.org/docs?slug=product#18b3d58a
2. 重启ps，打开psd，找到窗口--拓展功能--ImgCook ，选择图层，点击插件上的导出数据
3. 导出完毕，点击去粘贴，会打开一个网页，ctrl+V 粘贴
4. 选择dsl，选择何种方式导出代码（很多格式），右上角保存，然后导出为 .taz 压缩包，解压
5. 项目里粘贴，修改图片路径，预览
6. 可以创建私有项目，邀请GitHub用户参与，达到共享代码，协作的目的。

支持导出的格式很多

• 支付宝小程序，微信小程序
• vue，weex
• react，rn
• h5 <-- 最直观
• rax

注意：阿里云的图片没法用，不能外链。

效果怎么样

试用了几块内容，因为UI出图质量高，分组完整准确，最终产出的效果超出预期的好！

代码优先使用flex布局，合理使用绝对定位，生成的代码可读，可用，静态页还原度高。

这个是打码效果图，传统静态页几乎没问题：

打码效果图

对工作流的要求

对UI的要求

没什么严格要求，但是为了减轻工作量：

1. 图层建立文件夹，鼓励在文件夹上写有意义的名字，汉语英语均可
2. 同一个元素不能跨文件夹复用，比如背景图由多个不同位置的图层拼贴
3. 直线，图形使用矢量图，减少位图的使用

对前端的要求

要求：

1. 前端。给文件夹添加 ‘-合并’ 会自动合并图层
2. 前端。在文件夹上添加 '#英文名字# 会作为class的前缀

给文件夹添加 ‘-合并’ 会自动合并图层

class的前缀

感受

第一次使用被震撼到了，水平很高。

接下来打算继续使用，看能不能融入日常工作中。

欣喜之外：

顾虑隐私和业务数据的安全。这是数据大厂阿里，小厂没业务冲突无所谓。可以在阅读： 法律声明及隐私权政策

其他技术概念

这些没啥用，可以不看。

数据绑定的概念，ps里一般都是占位文字，可以使用数据绑定，后续提供data值完成自动填充。

甚至还可以定义 onclick，在线写组件，没啥用。

自适应配置。设定 设计稿750，设定布局宽度375，就可以使用rem了

还原配置的解释：

• 开启模块阈值处理。自动判断图层重叠的现象
• 开启模块多列自适应。默认某些情况下可能会产生绝对定位
• 开启模块合并文本。默认会自动合并成一行文本。
• 开启模块间隙自适应。对模块flex自适应，比如 space-between
• 开启模块循环检测。循环的组识别
• 开启模块脏数据。异常数据自动处理
• 开启模块智能图层检测。默认删除无用无影响的图层
• 开启模块智能图像检测。默认智能识别图像内容，生成描述

CLI

官方提供了cli辅助工作：

npm i -g @imgcook/cli
imgcook config ls
imgcook config set #配置 

工作流程：

1. 正常生成代码
2. 到我的项目里，找到对应的模块，打开，观察url能获取到id
3. imgcook pull --path 拉取模块并定义文件夹

还提供了 vscode插件，方便在项目里任意位置拉取组件代码

可以自定义开发，插件开发，分为 loader plugin，前者处理文件内容，后者处理工程目录。用到再说。