title: imgcook的出現(xiàn)梁丘，讓切圖仔何去何從侵浸？
category: Web
tag: imgcook
date: 2019-07-12
主標(biāo)題：我用了imgcook，感受一言難盡
副標(biāo)題：imgcook的出現(xiàn)氛谜，讓切圖仔何去何從掏觉？
副標(biāo)題： imgcook學(xué)習(xí)筆記
imgcook是什么
由設(shè)計(jì)稿一鍵智能生成代碼的大廚
官網(wǎng)：https://imgcook.taobao.org/ 還提供了視頻介紹。
這個(gè)工具是一鍵生成代碼的工具值漫，用戶提供 sketch psd 設(shè)計(jì)稿澳腹，機(jī)器自動(dòng)生成靜態(tài)頁面代碼。
類似的工具見過很多，但都被歷史遺忘了酱塔，這次imgcook能不能打沥邻？結(jié)論，還真能打延旧，好的超出預(yù)期谋国。
19年3月份的時(shí)候imgcook開始支持 ps photoshop 版的插件，截至到現(xiàn)在已經(jīng)是 1.0.6了迁沫。 我司出psd設(shè)計(jì)稿，就有了這篇文章捌蚊。
如何使用
使用非常簡單：
- 點(diǎn)擊鏈接下載插件集畅，解壓安裝，如果遇到問題參考這里https://imgcook.taobao.org/docs?slug=product#18b3d58a
- 重啟ps缅糟，打開psd挺智，找到窗口--拓展功能--ImgCook ，選擇圖層窗宦，點(diǎn)擊插件上的導(dǎo)出數(shù)據(jù)
- 導(dǎo)出完畢赦颇，點(diǎn)擊去粘貼，會(huì)打開一個(gè)網(wǎng)頁赴涵，ctrl+V 粘貼
- 選擇dsl媒怯，選擇何種方式導(dǎo)出代碼（很多格式），右上角保存髓窜，然后導(dǎo)出為 .taz 壓縮包扇苞，解壓
- 項(xiàng)目里粘貼，修改圖片路徑寄纵，預(yù)覽
- 可以創(chuàng)建私有項(xiàng)目鳖敷，邀請(qǐng)GitHub用戶參與，達(dá)到共享代碼程拭，協(xié)作的目的定踱。
支持導(dǎo)出的格式很多
- 支付寶小程序，微信小程序
- vue恃鞋，weex
- react崖媚，rn
- h5 <-- 最直觀
- rax
注意：阿里云的圖片沒法用，不能外鏈山宾。
效果怎么樣
試用了幾塊內(nèi)容至扰，因?yàn)閁I出圖質(zhì)量高，分組完整準(zhǔn)確资锰，最終產(chǎn)出的效果超出預(yù)期的好敢课！
代碼優(yōu)先使用flex布局，合理使用絕對(duì)定位，生成的代碼可讀直秆，可用濒募，靜態(tài)頁還原度高。
這個(gè)是打碼效果圖圾结，傳統(tǒng)靜態(tài)頁幾乎沒問題：
對(duì)工作流的要求
對(duì)UI的要求
沒什么嚴(yán)格要求瑰剃，但是為了減輕工作量：
- 圖層建立文件夾，鼓勵(lì)在文件夾上寫有意義的名字筝野，漢語英語均可
- 同一個(gè)元素不能跨文件夾復(fù)用晌姚，比如背景圖由多個(gè)不同位置的圖層拼貼
- 直線，圖形使用矢量圖歇竟，減少位圖的使用
對(duì)前端的要求
要求：
- 前端挥唠。給文件夾添加 ‘-合并’ 會(huì)自動(dòng)合并圖層
- 前端。在文件夾上添加 '#英文名字# 會(huì)作為class的前綴
感受
第一次使用被震撼到了焕议，水平很高宝磨。
接下來打算繼續(xù)使用，看能不能融入日常工作中盅安。
欣喜之外：
顧慮隱私和業(yè)務(wù)數(shù)據(jù)的安全唤锉。這是數(shù)據(jù)大廠阿里，小廠沒業(yè)務(wù)沖突無所謂别瞭×椋可以在閱讀： 法律聲明及隱私權(quán)政策
其他技術(shù)概念
這些沒啥用，可以不看畜隶。
數(shù)據(jù)綁定的概念壁肋，ps里一般都是占位文字，可以使用數(shù)據(jù)綁定籽慢，后續(xù)提供data值完成自動(dòng)填充浸遗。
甚至還可以定義 onclick，在線寫組件箱亿，沒啥用跛锌。
自適應(yīng)配置。設(shè)定 設(shè)計(jì)稿750届惋，設(shè)定布局寬度375髓帽，就可以使用rem了
還原配置的解釋：
- 開啟模塊閾值處理。自動(dòng)判斷圖層重疊的現(xiàn)象
- 開啟模塊多列自適應(yīng)脑豹。默認(rèn)某些情況下可能會(huì)產(chǎn)生絕對(duì)定位
- 開啟模塊合并文本郑藏。默認(rèn)會(huì)自動(dòng)合并成一行文本。
- 開啟模塊間隙自適應(yīng)瘩欺。對(duì)模塊flex自適應(yīng)必盖，比如 space-between
- 開啟模塊循環(huán)檢測(cè)拌牲。循環(huán)的組識(shí)別
- 開啟模塊臟數(shù)據(jù)。異常數(shù)據(jù)自動(dòng)處理
- 開啟模塊智能圖層檢測(cè)歌粥。默認(rèn)刪除無用無影響的圖層
- 開啟模塊智能圖像檢測(cè)塌忽。默認(rèn)智能識(shí)別圖像內(nèi)容，生成描述
CLI
官方提供了cli輔助工作：
npm i -g @imgcook/cli
imgcook config ls
imgcook config set #配置
工作流程：
- 正常生成代碼
- 到我的項(xiàng)目里失驶，找到對(duì)應(yīng)的模塊土居，打開，觀察url能獲取到id
-
imgcook pull <id> --path <path>拉取模塊并定義文件夾
還提供了 vscode插件嬉探，方便在項(xiàng)目里任意位置拉取組件代碼
可以自定義開發(fā)擦耀，插件開發(fā)，分為 loader plugin涩堤，前者處理文件內(nèi)容埂奈，后者處理工程目錄。用到再說定躏。
