psd-to-code

将 psd 文件解析成为代码的命令行工具

install

npm i psd-to-code -g

Usage

初始化:在当前目录下生成配置文件文件夹 ptcConfig

$ ptc init

解析 psd 生成代码

$ ptc <psdPath>

解析规则

psd 图层命名命名规则

• 图片图层命名为： img.png
• 文本图层命名为：desc.textv

模板

在模板文件中 ejs 模板标签： <%- variable %>, variable:

• html
• js
• scss
• px
• css
• less
• styledComponents
• jsx

example:

<!-- Temp.vue -->
<template><%- html %></template>

<style>
  <%- css %>
</style>

生成代码文件及图片:

<div class="img"></div>
<div class="desc">
  <span>文字</span>
</div>

.img {
  background-image: url('./image/img.png');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 36vw;
  height: 36vw;
  position: absolute;
  left: 0;
  top: 30vw;
}
.desc {
  width: 15.066667vw;
  height: 7.466667vw;
  position: absolute;
  left: 10vw;
  bottom: 16vw;
  font-size: 8vw;
  color: #bb3f;
}