新年送礼：用Harp + gulp + browser-sync 构建静态网站

用Harp + gulp + browser-sync 构建静态网站

目的：

• 快捷的实现页面原型。
• 更快的引入第三方模板。（WIP）
• 测试后端RestfulAPI。（WIP ）

Harp介绍

官网http://harpjs.com/

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