用Harp + gulp + browser-sync 構(gòu)建靜態(tài)網(wǎng)站
目的：
- 快捷的實現(xiàn)頁面原型。
- 更快的引入第三方模板。（WIP）
- 測試后端RestfulAPI。（WIP ）
Harp介紹
官網(wǎng)http://harpjs.com/
Harp 內(nèi)置靜態(tài)網(wǎng)頁預(yù)處理的靜態(tài)網(wǎng)站服務(wù)器。
Harp 提供的功能包括：
- css預(yù)處理（Sass LESS Stylus）
- 頁面數(shù)據(jù)加載
- 模板文件渲染（Jade EJS）
- 一個http server (基于 Node.js)
- 靜態(tài)網(wǎng)頁編譯輸出
- 靜態(tài)網(wǎng)站部署
- 支持CoffeeScript
Harp 5項基本原則
http://harpjs.com/docs/development/rules
約定優(yōu)先于配置
自動轉(zhuǎn)換模板 jade EJS到html
對象需要用下劃線“_”開頭的資源不被直接輸入。
數(shù)據(jù)通過文件名進(jìn)行自動綁定。
Harp 中的EJS模板和數(shù)據(jù)綁定
EJS中的語法：
layout的引用
<%- yield %>
partial的引用
<%- partial("../_partial/_index-header") %>
數(shù)據(jù)的引用
_harp.json 存放全局變量
{ "globals": { "siteTitle": "Logic Designer" } }
頁面引用
<%=siteTitle %>
_data.json （路徑： /product/_data.json）
{ "webex": { "title": "webex", "date": "2016-12-28" } }
在同目錄下引用 /product/webex.ejs
數(shù)據(jù)對象名稱如果與模板文件名一樣，則自動綁定到模板文件的上下文中，可以省略文件對象層次，直接引用屬性。
<%=webex.title %>
通過在data文件中定義同名文件，同樣也可以指定頁面所需要渲染的layout模板。（默認(rèn)的layout的文件名稱是目錄下的_layout.ejs或者＿layout.jade）
{ "ykindex":{ "layout":"_ykindex-layout", "title":"yunkechina 首頁" } }
在沒有按照名稱綁定的文件中，則需要用全路徑進(jìn)行引用。（public作為數(shù)據(jù)引用的根節(jié)點，然后加路徑和文件名稱引入數(shù)據(jù)文件）
<%=public.product._data.webex.title %>
靜態(tài)網(wǎng)站編譯 compile：可用在根目錄下的www目錄，生成對應(yīng)的html代碼。
$ harp compile
啟動內(nèi)置的http服務(wù)器流量網(wǎng)站
$ harp server --port 9000
Q&A：
之前都看了那些靜態(tài)網(wǎng)頁生成工具：
Assemble，Metalsmith, Roots, Brunch (跟多工具：https://www.staticgen.com/)
為什么選擇Harp？
因為別的框架都沒看懂。
為什么選用EJS模板？
Jade沒學(xué)會。
為什么不用watchman？
不會
靜態(tài)頁面開發(fā)集成工具
- Gulp + Broswer-sync 實現(xiàn)了修改自動刷新，提供開發(fā)效率。（這樣就能有更多時間睡午覺）
- 引用第三方模板庫，基于bootstrap的。
- 引入holder.js 作為圖片占位符。
其他前臺開發(fā)資源包括：
codepen
Harp 網(wǎng)上資源收集：
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
