用Harp + gulp + browser-sync 构建静态网站
目的：
- 快捷的实现页面原型。
- 更快的引入第三方模板。（WIP）
- 测试后端RestfulAPI。（WIP ）
Harp介绍
Harp 内置静态网页预处理的静态网站服务器。
Harp 提供的功能包括：
- css预处理（Sass LESS Stylus）
- 页面数据加载
- 模板文件渲染（Jade EJS）
- 一个http server (基于 Node.js)
- 静态网页编译输出
- 静态网站部署
- 支持CoffeeScript
Harp 5项基本原则
http://harpjs.com/docs/development/rules
约定优先于配置
自动转换模板 jade EJS到html
对象需要用下划线“_”开头的资源不被直接输入。
数据通过文件名进行自动绑定。
Harp 中的EJS模板和数据绑定
EJS中的语法：
layout的引用
<%- yield %>
partial的引用
<%- partial("../_partial/_index-header") %>
数据的引用
_harp.json 存放全局变量
{ "globals": { "siteTitle": "Logic Designer" } }
页面引用
<%=siteTitle %>
_data.json （路径： /product/_data.json）
{ "webex": { "title": "webex", "date": "2016-12-28" } }
在同目录下引用 /product/webex.ejs
数据对象名称如果与模板文件名一样，则自动绑定到模板文件的上下文中，可以省略文件对象层次，直接引用属性。
<%=webex.title %>
通过在data文件中定义同名文件，同样也可以指定页面所需要渲染的layout模板。（默认的layout的文件名称是目录下的_layout.ejs或者＿layout.jade）
{ "ykindex":{ "layout":"_ykindex-layout", "title":"yunkechina 首页" } }
在没有按照名称绑定的文件中，则需要用全路径进行引用。（public作为数据引用的根节点，然后加路径和文件名称引入数据文件）
<%=public.product._data.webex.title %>
静态网站编译 compile：可用在根目录下的www目录，生成对应的html代码。
$ harp compile
启动内置的http服务器流量网站
$ harp server --port 9000
Q&A：
之前都看了那些静态网页生成工具：
Assemble，Metalsmith, Roots, Brunch (跟多工具：https://www.staticgen.com/)
为什么选择Harp？
因为别的框架都没看懂。
为什么选用EJS模板？
Jade没学会。
为什么不用watchman？
不会
静态页面开发集成工具
- Gulp + Broswer-sync 实现了修改自动刷新，提供开发效率。（这样就能有更多时间睡午觉）
- 引用第三方模板库，基于bootstrap的。
- 引入holder.js 作为图片占位符。
其他前台开发资源包括：
codepen
Harp 网上资源收集：
How to use the Harp.js static site generator
Node.js E-Commerce with Harp JS & Snipcart - Snipcart
https://github.com/snipcart/snipcart-harp
Harp, Gulp And BrowserSync
https://github.com/superhighfives/harp-gulp-browsersync-boilerplate
