#pc-sub 教程 @[v1.2.7]
[TOC] #安装
下载v4.0.0+版本并进行安装(安装到默认位置即可)。
在
v5.0+中暂时不支持雪碧图的合并。
https://nodejs.org/en/download/
如果之前安装过的版本比较高，需要卸载当前版本并进行新版本的安装。
或者使用nvm(比较坑)
##2、Npm配置
- 设置代理服务器，如果不是
IP直连，需要设置代理，或者使用代理软件
$ npm config set proxy http://192.168.11.254:8080
$ npm config set https-proxy http://192.168.11.254:8080- 设置
npm镜像仓库，源仓库在国外，安装包的时候网络可能会连不上，建议设置成某宝镜像库
$ npm config set registry https://registry.npm.taobao.org ##3、安装pc-sub
mac安装需要sudo.
$ npm install -g [email protected]or
$ npm i -g [email protected]若要查看详细的安装信息:
$ npm i -gd [email protected]#快速开始
- 创建
work工作区 --- 新建文件夹work - 进入工作区
- 开启本地预览服务器，端口
8090 - 在工作区创建一个项目
zta - 在项目文件夹进行编译（将自动打开浏览器 http://127.0.0.1:8090），开启实时刷新
- 开始编写代码
bash:
$ mkdir work
$ cd work
$ pc-sub server -s
$ pc-sub create -o zta
$ cd dev/zta
$ pc-sub release -L#页面实时刷新
在 pc-sub release -L的时候，就开启了监听项目文件改动后浏览器实时刷新了。它会给编译后的*.html文件添加一段代码。
<script type="text/javascript" charset="utf-8" src="http://192.168.50.33:8132/livereload.js"></script>
所以，在进行了 -L编译的时候，不能进行对编译后的文件打包上传，要执行一次pc-sub release -c编译，去掉livereload.js。
实时刷新是通过websocket实现的，所有大部分手机和低版本浏览器是不支持的。
#Less/Sass 编译
在项目的 css 文件夹中，所有的.less文件.sass文件都将会进行编译。
新建一个index.less文件。
//index.lexx
body{
background: #00f;
div{
color:#f3f;
}
}将自动进行编译，编译后：
body{
background: #00f;
}
body div{
color: #f3f;
}在page/index.html引入相对路径(../css/index.less)即可，编译后会自动替换编译后的相对路径。
Sass 的编译亦如此。
Less 教程推荐 http://less.bootcss.com/ Sass 教程推荐 http://www.w3cplus.com/sassguide/
#使用Handlebars模板
在项目的page文件夹中，默认会有个与Handlebars模板相对应的_data.js数据文件，所有.html文件会自动进行结合_data.js数据文件的模板编译：
_data.js 是一个可执行的js文件，也就是说，他会在与模板进行结合之前将会运行求值。
//_data.js
var i = 1
var time = 'today-' + i
module.exports.data = {
//your page data..
items:[{
price: 1,
name: 's'
},{
price: 10,
name: 'x'
},{
price: 12,
name: 'g'
}],
project:'proA',
time : time
}编译前（zta/page/index.html）：
<h1>{{project}}</h1>
<p>{{time}}</p>
<ul>
<!-- 循环 _data.js 里面的数组属性 items -->
{{#items}}
<li>{{name}} , price : {{price}}</li>
{{/items}}
</ul>编译后（zta/index.html）：
<h1>proA</h1>
<p>today-1</p>
<ul>
<!-- 循环 _data.js 里面的数组属性 items -->
<li>s , price : 1</li>
<li>x , price : 10</li>
<li>g , price : 12</li>
</ul>#雪碧图合并
- 暂不支持Node.js v5.0.0+
- 不支持分别合成多张雪碧图
使用方法跟官方的一致。默认已经在pc-sub启动，无需手动配置。
FIS3官方文档-雪碧图合并
/*默认情况下，对打包 css 文件启动图片合并功能。*/
li.list-1::before {
background-image: url('./img/list-1.png?__sprite');
}
li.list-2::before {
background-image: url('./img/list-2.png?__sprite');
}#script模板
在*.html里面如要使用script模板，需要给出指定的type="text/template"，否则里面的路径将无法编译。
<script type="text/template">
<div>
<img src="../img/a.png">
</div>
</script>#编辑填充工具
进入http://127.0.0.1:8090/edit/zta/index.html#index
就可以对page/index.html文件进行填充内容了。
/edit/的url对应在了work工作区里面的/edit/文件夹。
目前该文件夹下面，分别为每个项目的编辑器代码。目前各个项目的编辑器代码都是一样的。
通过上面的链接就可以打开编辑器了。
#index的哈希值对应着page/index.html，如果你要选择page/indexB.html的文件进行填充，那可以访问http://127.0.0.1:8090/edit/zta/index.html#indexB。默认为`page/index.html`。
| Url | Hash | Page |
|---|---|---|
| http://127.0.0.1:8090/edit/zta/index.html#index | #index | page/index.html |
| http://127.0.0.1:8090/edit/zta/index.html#indexB | #indexB | page/indexB.html |
##预设占位符
预设占位符是用来指定这个地方是可以给编辑器填充的。但编辑器进行了一次保存之后，所有的预设占位符将在page/index.html中被替换成一个Handlebars变量。
@img:100x100:图片链接占位符，冒号后面的参数为图片尺寸，尺寸可以自定义。@title:10:标题占位符，冒号后面的参数为字符串长度。@text:10:文本占位符，冒号后面的参数为字符串长度，文本会在随机位置添加标点符号。@url:ttt:链接占位符，冒号后面的参数为url参数，如@url:ttt=>http://www.pconline.com.cn?mock=ttt#html: 代码占位符，用于填充html代码片段。
使用：
page/index.html
<h1>{{@title:5}}</h1>
<p>
{{@text:20}}
<a href="{{@url:x}}">
<img src="{{@img:100x200}}" width="100" height="200">
</a>
{{#html}}{{/html}}
</p>编译后：
<h1>太平洋电脑</h1>
<p>
太平洋电脑网太平洋电脑网太平洋。脑网太平
<a href="http://www.pconline.com.cn?mock=x">
<img src="http://dummyimage.com/100x200/70ec31/FFF" width="100" height="200">
</a>
</p>编辑页面。
- 顶部工具栏
select用来选择page文件夹里面的html文件。 - 保存按钮将进行内容保存，
！注意：点击保存后，会对我们的开发源文件/dev/page/xxx.html进行修改，因此，强烈建议在编辑确认了页面效果之后，再由编辑进行文字填充。 - 未保存之前，右边的预览会实时更新左边所改变的内容。但只有点了保存后，内容才会填入编译后的文件。