发现一个工具，可以将psd 导出成 html，搭建nodejs环境测试

本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/78738316
未经博主允许不得转载。
博主地址是：http://blog.csdn.net/freewebsys

1，关于psd 转 html

---

都是nodejs写的。
可能是前段同学觉得 psd 切图比较麻烦。开发的一个工具吧。
https://github.com/wanxianjia/PSD2HTML
这个项目是 5 年前写的。还支持Photoshop的插件。
可惜node版本比较低，我咋也运行不起来了。最终放弃了。

https://github.com/anjorweb/fastHtml
这个项目是 3个月前写的。
可以使用cnpm 跑起来。

2，使用nodejs 8 docker 编译

---

使用docker 编译。没有系统差别。谁都能跑起来。
提供的是一个通用的。

先下载项目：

git clone https://github.com/anjorweb/fastHtml.git psd2html

重命名下叫 psd2html

FROM docker.io/node:8-stretchRUN echo "deb http://mirrors.aliyun.com/debian/ stretch main non-free contrib" > /etc/apt/sources.list && \echo "deb http://mirrors.aliyun.com/debian/ stretch-proposed-updates main non-free contrib" >> /etc/apt/sources.list && \echo "deb-src http://mirrors.aliyun.com/debian/ stretch main non-free contrib" >> /etc/apt/sources.list && \echo "deb-src http://mirrors.aliyun.com/debian/ stretch-proposed-updates main non-free contrib" >> /etc/apt/sources.listRUN echo  "[global]" > /etc/pip.conf && \echo  "trusted-host=mirrors.aliyun.com" >> /etc/pip.conf && \echo  "index-url=http://mirrors.aliyun.com/pypi/simple" >> /etc/pip.conf################ add nodejs ################RUN npm install -g cnpm --registry=https://registry.npm.taobao.orgRUN mkdir -p /root/psd2html && mkdir -p /root/serverADD psd2html /root/psd2htmlADD server /root/serverRUN cd /root/psd2html && cnpm install -d

使用 cnpm install -d 直接编译就行了。
编译好了就可以启动了

docker build -t demo/psd2html .

3，启动测试

---

启动docker run -itd --name psd2html demo/psd2html进入dockerdocker exec -it psd2html bash

执行命令

cd /root/psd2html/npm start 001.psd

如果要是看到输出结果：

# npm start 001.psd> fastHTML@0.0.2 start /root/psd2html> node app.js "001.psd"export start...export end!end time:887ms

说明执行成功。
文件在 /root/psd2html/export/001psd/ 下面

001psd 文件是这样的：

生成的页面是这样的：

4，总结

---

工具使用起来还是非常方便的。
但是还是有个缺点。文字啥的都被转换成图片了。
但是已经把图片都切好了。坐标样式啥的都计算好了。
一些简单的工作可以被替换掉了。非常的方便呢。
命名当然是啥 group 1 2 3 4 啥的了。没有啥规律了。
如果要是只是几个宣传页面，修改下链接跳转啥的。
用这个做没有啥问题。

本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/78738316
未经博主允许不得转载。
博主地址是：http://blog.csdn.net/freewebsys