新年送禮:用Harp +? gulp + browser-sync 構(gòu)建靜態(tài)網(wǎng)站

用Harp + gulp + browser-sync 構(gòu)建靜態(tài)網(wǎng)站

目的:

  • 快捷的實(shí)現(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é)點(diǎn),然后加路徑和文件名稱引入數(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 實(shí)現(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末寒砖,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子嫉拐,更是在濱河造成了極大的恐慌哩都,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件婉徘,死亡現(xiàn)場離奇詭異漠嵌,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)盖呼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進(jìn)店門儒鹿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人几晤,你說我怎么就攤上這事约炎。” “怎么了蟹瘾?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵圾浅,是天一觀的道長。 經(jīng)常有香客問我憾朴,道長狸捕,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任众雷,我火速辦了婚禮灸拍,結(jié)果婚禮上做祝,老公的妹妹穿的比我還像新娘。我一直安慰自己株搔,他們只是感情好剖淀,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著纤房,像睡著了一般。 火紅的嫁衣襯著肌膚如雪翻诉。 梳的紋絲不亂的頭發(fā)上炮姨,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天,我揣著相機(jī)與錄音碰煌,去河邊找鬼舒岸。 笑死,一個胖子當(dāng)著我的面吹牛芦圾,可吹牛的內(nèi)容都是我干的蛾派。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼个少,長吁一口氣:“原來是場噩夢啊……” “哼洪乍!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起夜焦,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤壳澳,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后茫经,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體巷波,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年卸伞,在試婚紗的時候發(fā)現(xiàn)自己被綠了抹镊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡荤傲,死狀恐怖垮耳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情弃酌,我是刑警寧澤氨菇,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站妓湘,受9級特大地震影響查蓉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜榜贴,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一豌研、第九天 我趴在偏房一處隱蔽的房頂上張望妹田。 院中可真熱鬧,春花似錦鹃共、人聲如沸鬼佣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽晶衷。三九已至,卻和暖如春阴孟,著一層夾襖步出監(jiān)牢的瞬間晌纫,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工永丝, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留锹漱,地道東北人。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓慕嚷,卻偏偏與公主長得像哥牍,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子喝检,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內(nèi)容

  • gulpjs是一個前端構(gòu)建工具嗅辣,與gruntjs相比,gulpjs無需寫一大堆繁雜的配置參數(shù)蛇耀,API也非常簡單辩诞,學(xué)...
    依依玖玥閱讀 3,149評論 7 55
  • 在現(xiàn)在的前端開發(fā)中,前后端分離纺涤、模塊化開發(fā)译暂、版本控制、文件合并與壓縮撩炊、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,433評論 1 32
  • awesome-gulp中文版 一份gulp的資源祭衩,插件和使用實(shí)例清單, 致力于打造更好的前端工程構(gòu)建流程阅签。 被老...
    Pines_Cheng閱讀 5,517評論 10 117
  • 前言 本文默認(rèn)你已經(jīng)安裝好node環(huán)境掐暮,并且熟悉node命令,和window cd命令政钟。 gulp簡介 基于nod...
    9I閱讀 1,976評論 4 50
  • “我們吵個架吧路克?” “下周再說” “為什么樟结?” “這周要應(yīng)付客戶” “下周我就沒心情吵啦” “這周事情超多” “吵...
    陳皮桃汁閱讀 219評論 0 2