发现一个工具，可以将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-stretch

RUN 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.list

RUN 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.org
RUN mkdir -p /root/psd2html && mkdir -p /root/server

ADD psd2html /root/psd2html
ADD server /root/server

RUN cd /root/psd2html && cnpm install -d

使用 cnpm install -d 直接编译就行了。

编译好了就可以启动了

docker build -t demo/psd2html .

3，启动测试

启动
docker run -itd --name psd2html demo/psd2html
进入docker
docker 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