Jade
安裝：
npm install jade –global
安裝后本地隨便新建一個(gè)sample.jade文件秘车，執(zhí)行：
jade sample.jade
就能將其翻譯成標(biāo)準(zhǔn)的sample.html源文件了
命令參數(shù)：
-P（大寫钧嘶，命令參數(shù)是大小寫敏感的）龟劲。Jade默認(rèn)編譯出來的html源文件里是沒有縮進(jìn)的炒嘲，不便于開發(fā)。加上-P參數(shù)后尝哆，編譯出來的html源文件里就有縮進(jìn)了：
jade -P sample.jade
-w用來watch監(jiān)視jade文件沮尿，每次改動(dòng)保存后自動(dòng)編譯成html文件，省去手動(dòng)執(zhí)行命令的麻煩：
jade -P -w sample.jade
-O用來給jade文件傳遞對(duì)象或JSON文件较解，用以替換模板內(nèi)的變量：
jade -P -w sample.jade -O sample.json
標(biāo)簽和屬性
省略尖括號(hào)畜疾，直接寫標(biāo)簽名。標(biāo)簽間的嵌套關(guān)系用換行加空格來實(shí)現(xiàn)印衔。緊接在標(biāo)簽名后加上.xx或#xx啡捶，就能給標(biāo)簽添加css類名和id。
標(biāo)簽名后第一個(gè)空格后面的內(nèi)容會(huì)被編譯成標(biāo)簽內(nèi)的文本內(nèi)容
標(biāo)簽屬性的正統(tǒng)寫法應(yīng)該是寫入()括號(hào)內(nèi)
多行文本
在每行前加上|豎線符
用這種寫法奸焙，可以用Jade語法來嵌套標(biāo)簽, 不僅可用于p標(biāo)簽等瞎暑，也常見于style和script標(biāo)簽
p
span 第1行文本
| 第2行文本
| 第3行文本
| 第4行文本
//編譯出來的結(jié)果
<p><span>第1行文本</span>第2行文本
第3行文本
第4行文本
<p>
script.
console.log("open mind");
console.log("learning quick");
console.log("work hard");
變量
變量聲明很簡(jiǎn)單，前面加上-橫杠与帆。使用變量只要#{變量名}就行了了赌。例如：
- var cs = 'UTF-8'
meta(charset='#{cs}')
//編譯出來的結(jié)果
<meta charset="UTF-8">
input(value='#{aaa}')
input(value=aaa)
//編譯出來的結(jié)果
<input value="undefined">
<input>
如果不想HTML轉(zhuǎn)碼，可以將#改成!嘆號(hào)
可以前面加\反斜杠來讓Jade引擎不編譯變量
可以在標(biāo)簽后面緊接=等號(hào)（不轉(zhuǎn)義用!=）來輸出變量
可以看出用#{}如果變量未定義玄糟，將會(huì)編譯成undefined作為初始值勿她。但用=等號(hào)來編譯變量的話，如果變量未定義就忽略
有了變量就能輕松實(shí)現(xiàn)前后端分離阵翎。數(shù)據(jù)保存在JSON文件里逢并。前端用Jade模板制作頁(yè)面之剧，在需要顯示數(shù)據(jù)處用變量來實(shí)現(xiàn)。例如sample.json文件里：
{
"charset": "UTF-8",
"title": "My First Jade Page"
}
sample.jade文件里：
doctype html
html
head
meta(charset='#{charset}')
body
h1.titleClass#titleID #{title}
執(zhí)行命令：jade -P -w sample.jade -O sample.json后Jade文件里的變量被自動(dòng)替換砍聊。編譯出來的sample.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 id="titleID" class="titleClass">My First Jade Page</h1>
</body>
</html>
語句
- if-else
- unless
- case-when
- for-in
- each-in
- while
- var author = 'Jack';
if author
p 作者：#{author}
else
p 無作者
//編譯出來的結(jié)果
<p>作者：Jack</p>
Jade還支持unless語句背稼，它是if-else的反向，寫法都一樣玻蝌，用的不多就不舉例了蟹肘。
Jade里的case-when語句就是JavaScript里的switch-case語句（不知為何…）
- var authors = ['Jack', 'Bill'];case authors[0]
when 'Jack'
p 作者是Jack
when 'Bill'
p 作者是Bill
default
p 無作者
//編譯出來的結(jié)果
<p>作者是Jack</p>
循環(huán)遍歷用for-in（注意上面的if-else，case-when語句前不用像變量那樣加上-橫杠俯树，但for的前面要加上-橫杠疆前。如果漏寫-橫杠，會(huì)被解析為標(biāo)簽）：
- var person = {name:'Jack', gender: 'Male'}
- for (var prop in person)
p= person[prop]
//編譯出來的結(jié)果
<p>Jack</p>
<p>Male</p>
循環(huán)遍歷也可以用each-in（each前的-橫杠加不加均可）：- var employee = {name:'Jack', gender: 'male'}
- each value, key in person
p #{key}: #{value}
- var language = ['Java', 'JavaScript', 'C++']
ul
each item in language
li #{item}
//編譯出來的結(jié)果
<p>name: Jack</p>
<p>gender: male</p>
<ul>
<li>Java</li>
<li>JavaScript</li>
<li>C++</li>
</ul>
循環(huán)遍歷也可以用while（同樣前面加不加-橫杠均可）：
- var n = 0
ul
while n < 4
li= n++
//編譯出來的結(jié)果
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Mixin
mixin personInfo(name, hobbies)
p #{name}'s hobbies:
ul.hobby
each hobby in hobbies
li= hobby
+personInfo('Jack', ['movie', 'music'])
//編譯出來的結(jié)果
<p>Jack's hobbies:</p>
<ul class="hobby">
<li>movie</li>
<li>music</li>
</ul>
模板
Jade用block和extends來實(shí)現(xiàn)模板的繼承
block真正的作用在于占位聘萨，供子文件繼承竹椒，可以理解為傳統(tǒng)OO語言里的虛函數(shù)。父文件里定義的block米辐，子文件里用extends來繼承并重寫
例如每個(gè)文件的頁(yè)頭都一樣胸完，就body里內(nèi)容不一樣，可以寫一個(gè)header.jade：
doctype html
html
head
meta(charset='#{charset}')
block scripts
script(src='jquery.js')
script(src='underscore.js')
script(src='backbone.js')
body
block content
p please write content
每個(gè)頁(yè)面的header都長(zhǎng)這樣翘贮。而body里定義了block content赊窥，這里block可以理解為一個(gè)占位符placeholder，需要繼承它的文件重寫block content狸页。根據(jù)業(yè)務(wù)需求寫頁(yè)面主體部分锨能，例如sample.jade改成這樣：
extends header
block content
h1.titleClass#titleID #{title}
a(, target='_blank') 我的主頁(yè)
……
在sample.jade里，開頭用extends表明和header.jade的繼承關(guān)系芍耘。然后根據(jù)業(yè)務(wù)重寫header.jade里的block content址遇。
(執(zhí)行jade -P -w sample.jade -O sample.json就能看到和之前一模一樣的頁(yè)面。引擎加載流程是：解析sample.jade斋竞，發(fā)現(xiàn)開頭有extends倔约，就去解析header.jade，將其編譯成html坝初。此時(shí)html里的body里是<p>please write content</p>浸剩。解析完header.jade就繼續(xù)解析sample.jade，發(fā)現(xiàn)block content鳄袍，于是會(huì)將定義在header.jade里的block content替換掉绢要。最終輸出的是正確的頁(yè)面內(nèi)容，而不是<p>please write content</p>拗小。（但如果你執(zhí)行的是jade -P -w header.jade -O sample.json會(huì)發(fā)現(xiàn)body里內(nèi)容為<p>please write content</p>）)
除繼承外還可以用include包含重罪。Include會(huì)將內(nèi)容無腦全拷貝進(jìn)去。例如上面的sample.jade第一行extends header改成include header。
與extends不同蛆封，include就是無腦將另一個(gè)文件里的內(nèi)容直接拷貝進(jìn)去，不像block + extends可以重寫block勾栗。
注意：include包括extends如果省略后綴名惨篱，Jade默認(rèn)該文件時(shí).jade會(huì)進(jìn)行編譯。但如果另一個(gè)文件里寫的是原生的html围俘，需要寫明后綴名為.html（例如include xx.html）砸讳，明確告訴Jade不要編譯。
注釋
Jade里加上//就能添加注釋界牡，用雙斜杠的注釋會(huì)被輸出到html源碼里簿寂。
如果不想在html源碼里輸出注釋，用//-宿亡，在雙斜杠后加一橫杠常遂。
html里還可以寫注釋型的條件語句，常用于兼容IE挽荠。Jade里你同樣可以寫這些條件語句克胳，例如將上面header.jade改成能識(shí)別IE89，應(yīng)用不同的class：
doctype html
<!--[if IE 8]><html class='ie8'><![endif]-->
<!--[if IE 9]><html class='ie9'><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
head
meta(charset='#{charset}')
block scripts
script(src='jquery.js')
script(src='underscore.js')
script(src='backbone.js')
body
block content
p please write content
</html>
上面因?yàn)橛辛藯l件語句圈匆，所以html標(biāo)簽用尖括號(hào)括了起來漠另，因此最下面要手動(dòng)加上來閉合標(biāo)簽。而且Jade是空格縮進(jìn)敏感的跃赚，需要將原先的head和body包括里面內(nèi)容笆搓，全往前縮進(jìn)2個(gè)空格。
塊注釋
塊注釋也是支持的：
body
//
#content
h1 Example
渲染為：
<body>
<!--
<div id="content">
<h1>Example</h1>
</div>
-->
</body>
Jade 同樣很好的支持了條件注釋：
body
//if IE
a() Get Firefox
渲染為：
<body>
<!--[if IE]>
<a >Get Firefox</a>
<![endif]-->
</body>
過濾器
Jade同樣兼容其他模塊纬傲，例如寫博客愛用的markdown满败，寫css愛用的less，還有coffeeScript等叹括。只要npm安裝好后葫录，用:冒號(hào)+模塊名就能聲明使用這些模塊，例如：
:markdown
...
:less
...
:coffee
...
