CEP插件，用于快速将psd输出为html+css+img

CEP插件，用于快速将psd输出为html+css+img

CEP 概述：

CEP 即是 Common Extensibility Platform：通用扩展平台， CEP 上运行的实际上一个可以与宿主程序（调用这个扩展的程序，比如 Photoshop）进行交互 Web APP， 它的界面是由 HTML5 网页构成，通过 JavaScript 调用 ExtendScript 与宿主交互（如操作图层），通过 Node.js 与本地操作系统交互(如读写文件、调用本地程序)

CEP 开发，需要了解以下：

--HTML + CSS + JS 的网页开发基础概念 --ExtendScript 的相关概念 --对要开发的宿主应用（如 PhotoShop）的了解 CEP插件开发教程参考: 【http://nullice.com/archives/1622 】

1.安装abobe photoshop cc版本
2.配置开发环境

--->打开到注册表（运行 regedit） CC 、CC 2014：HKEY_CURRENT_USER\Software\Adobe\CSXS.5 CC 2015：HKEY_CURRENT_USER\Software\Adobe\CSXS.6 CC 2015.5：HKEY_CURRENT_USER\Software\Adobe\CSXS.7 --->添加 字符串值 项 PlayerDebugMode，将值设置为 1

3.CEP 扩展存放的目录(createHtml存放目录，根据系统和photoshop cc版本进行选择)

CC 2014, CC 2015, CC 2015.1 Windows 32 位 C:\Program Files\Common Files\Adobe\CEP\extensions\ Windows 64 位 C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\ Windows 通用 C:\Users\系统用户名\AppData\Roaming\Adobe\CEP\extensions\ OS X /Library/Application Support/Adobe/CEP/extensions/ CC Windows 32 位 C:\Program Files\Common Files\Adob\CEPServiceManager4\extensions\ Windows 64 位 C:\Program Files\Common Files\Adob\CEPServiceManager4\extensions\ Windows 通用 C:\Users\系统用户名\AppData\Roaming\Adobe\CEPServiceManager4\extensions\ OS X /Library/Application Support/Adobe/CEP/extensions/

4.安装目录依赖包

项目下运行： npm i

5.插件使用
使用photoshop cc 打开一张要编译的psd,对psd图层根据要生成的DOM结构进行处理,
弹出，编译窗口 ：文件窗口-》扩展工具-》选择 CREATE HTML
点击编译

在编译目录下会生成编译好的文件，进入项目依次运行 安装依赖包： npm i 编译scss,js等： gulp 将css文件在html中引入，运行npm start