- A+
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设计稿，就有了这篇文章。
如何使用
使用非常简单：
-
点击链接下载插件，解压安装，如果遇到问题参考这里https://imgcook.taobao.org/docs?slug=product#18b3d58a
-
重启ps，打开psd，找到窗口--拓展功能--ImgCook ，选择图层，点击插件上的导出数据
-
导出完毕，点击去粘贴，会打开一个网页，ctrl+V 粘贴
-
选择dsl，选择何种方式导出代码（很多格式），右上角保存，然后导出为 .taz 压缩包，解压
-
项目里粘贴，修改图片路径，预览
-
可以创建私有项目，邀请GitHub用户参与，达到共享代码，协作的目的。
支持导出的格式很多
-
支付宝小程序，微信小程序
-
vue，weex
-
react，rn
-
h5 <-- 最直观
-
rax
注意：阿里云的图片没法用，不能外链。
效果怎么样
试用了几块内容，因为UI出图质量高，分组完整准确，最终产出的效果超出预期的好！
代码优先使用flex布局，合理使用绝对定位，生成的代码可读，可用，静态页还原度高。
这个是打码效果图，传统静态页几乎没问题：
打码效果图
对工作流的要求
对UI的要求
没什么严格要求，但是为了减轻工作量：
-
图层建立文件夹，鼓励在文件夹上写有意义的名字，汉语英语均可
-
同一个元素不能跨文件夹复用，比如背景图由多个不同位置的图层拼贴
-
直线，图形使用矢量图，减少位图的使用
对前端的要求
要求：
-
前端。给文件夹添加 ‘-合并’ 会自动合并图层
-
前端。在文件夹上添加 '#英文名字# 会作为class的前缀
给文件夹添加 ‘-合并’ 会自动合并图层
class的前缀
感受
第一次使用被震撼到了，水平很高。
接下来打算继续使用，看能不能融入日常工作中。
欣喜之外：
顾虑隐私和业务数据的安全。这是数据大厂阿里，小厂没业务冲突无所谓。可以在阅读： 法律声明及隐私权政策
其他技术概念
这些没啥用，可以不看。
数据绑定的概念，ps里一般都是占位文字，可以使用数据绑定，后续提供data值完成自动填充。
甚至还可以定义 onclick，在线写组件，没啥用。
自适应配置。设定 设计稿750，设定布局宽度375，就可以使用rem了
还原配置的解释：
-
开启模块阈值处理。自动判断图层重叠的现象
-
开启模块多列自适应。默认某些情况下可能会产生绝对定位
-
开启模块合并文本。默认会自动合并成一行文本。
-
开启模块间隙自适应。对模块flex自适应，比如 space-between
-
开启模块循环检测。循环的组识别
-
开启模块脏数据。异常数据自动处理
-
开启模块智能图层检测。默认删除无用无影响的图层
-
开启模块智能图像检测。默认智能识别图像内容，生成描述
CLI
官方提供了cli辅助工作：
npm i -g @imgcook/cli imgcook config ls imgcook config set #配置
工作流程：
-
正常生成代码
-
到我的项目里，找到对应的模块，打开，观察url能获取到id
-
imgcook pull <id> --path <path>拉取模块并定义文件夹
还提供了 vscode插件，方便在项目里任意位置拉取组件代码
可以自定义开发，插件开发，分为 loader plugin，前者处理文件内容，后者处理工程目录。用到再说。
13人点赞
