环境准备：
全局安装jade: npm install jade -g
初始化项目package.json: npm init --yes
安装完成之后，可以使用 jade --help 查看jade的命令行用法
一、在项目目录下新建index.jade文件
inde.jade代码：
1 doctype html2 html3 ????head4 ????????meta(charset=‘utf-8‘)5 ????????title6 ????body7 ????????h3 欢迎学习jade
语法规则：
1， 标签按照html的缩进格式写
2，标签的属性可以采用圆括号
3，如果标签有内容，可以直接写在标签的后面
然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件，-P( 把代码整理成缩进格式的，如果不带这个参数，index.html就是压缩格式，不利于阅读)
编译之后的index.html代码：
1 <!DOCTYPE html> 2 <html> 3 ??<head> 4 ????<meta charset="utf-8"> 5 ????<title></title> 6 ??</head> 7 ??<body> 8 ????<h3>欢迎学习jade</h3> 9 ??</body>10 </html>
二、class,id等其他属性与多行文本的书写
新建index2.jade文件,代码如下：
1 doctype html 2 html 3 ????head 4 ????????meta(charset=‘utf8‘) 5 ????????title jade template engine 6 ????body 7 ????????h1 jade template engine 8 ????????h1 jade template engine 9 ????????h1 jade template engine10 ????????h1 jade template engine11 ????????div#box.box1.box2(class=‘box3‘)12 ????????#abc.box1.box2.box313 ????????h3.box1.box2(class=‘abc def‘)14 ????????a(href=‘http://www.taobao.com‘,15 ????????target = ‘blank‘) 淘宝16 ????????input(type=‘button‘, value=‘点我‘)17 ????????br18 ????????p.19 ????????????1,this is20 ????????????<strong>hello</strong>21 ????????????2,test22 ????????????3,string23 ????????p24 ????????????| ??1, this is25 ????????????strong hello26 ????????????| ??2, test27 ????????????| ??3, test string
执行编译命令：jade -P <index2.jade> ghostwu.html 把index2.jade编译成ghostwu.html文件，编译之后的代码如下：
1 <!DOCTYPE html> 2 <html> 3 ??<head> 4 ????<meta charset="utf8"> 5 ????<title>jade template engine</title> 6 ??</head> 7 ??<body> 8 ????<h1>jade template engine</h1> 9 ????<h1>jade template engine</h1>10 ????<h1>jade template engine</h1>11 ????<h1>jade template engine</h1>12 ????<div id="box" class="box1 box2 box3"></div>13 ????<div id="abc" class="box1 box2 box3"></div>14 ????<h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" target="blank">淘宝</a>15 ????<input type="button" value="点我"><br>16 ????<p>17 ??????1,this is18 ??????<strong>hello</strong>19 ??????2,test20 ??????3,string21 ????</p>22 ????<p> ?1, this is<strong>hello</strong> ?2, test23 ????????3, test string24 ????</p>25 ??</body>26 </html>
1，div#box.box1.box2(class=‘box3‘) 这种写法是emmet的写法 #就是id属性 点(.)就是class属性 括号也是属性写法
2，#abc.box1.box2.box3，全面没有给元素标签名称，默认就是给div标签加上这些属性
3，多行文本的两种写法
p.
1,this is
<strong>hello</strong>
2,test
3,string
多行文本第1种写法：p标签后面要跟一个. 里面用原始的html标签写法
p
| 1, this is
strong hello
| 2, test
| 3, test string
多行文本第2种写法： 文本前面用竖线 ( | )，标签后面跟内容
三、注释
jade模板代码：
1 doctype html 2 html 3 ????head 4 ????????meta(charset=‘utf8‘) 5 ????????title jade模板引擎学习-by ghostwu 6 ????body 7 ????????h3 单行注释 8 ????????// div.box.box2 这是一段div 9 ????????h3 不会编译到html文件的注释10 ????????//- div#box.box2.box311 ????????h3 块注释,也叫多行注释12 ????????//- 13 ????????????input(type=‘checkbox‘, name=‘meinv‘, value=‘仙女‘) 仙女14 ????????????input(type=‘checkbox‘, name=‘meinv‘, value=‘御姐‘) 御姐15 ????????h3 这里不是注释16 ????????input(type=‘checkbox‘, name=‘meinv‘, value=‘仙女‘)17 ????????| 仙女18 ????????input(type=‘checkbox‘, name=‘meinv‘, value=‘御姐‘)19 ????????| 御姐
编译之后:
1 <!DOCTYPE html> 2 <html> 3 ??<head> 4 ????<meta charset="utf8"> 5 ????<title>jade模板引擎学习-by ghostwu</title> 6 ??</head> 7 ??<body> 8 ????<h3>单行注释</h3> 9 ????<!-- div.box.box2 这是一段div-->10 ????<h3>不会编译到html文件的注释</h3>11 ????<h3>块注释,也叫多行注释</h3>12 ????<h3>这里不是注释</h3>13 ????<input type="checkbox" name="meinv" value="仙女">仙女14 ????<input type="checkbox" name="meinv" value="御姐">御姐15 ??</body>16 </html>
1，单行注释
// div.box.box2 这是一段div
2，只在jade中注释，不会被编译到html文件
//- div#box.box2.box3
3，块注释( 多行文本注释 )，被注释的内容要另起一行
4，checkbox后面的显示文字部分 要注意，不要挨着属性的后面，要另起一行，写在竖线的后面
四、jade模板实战菜单
doctype htmlhtml ???head ???????meta(charset=‘utf8‘) ???????title jade模板引擎学习-by ghostwu ???????style. ???????????* { margin : 0; padding: 0; } ???????????li { list-style-type: none; } ???????????a { text-decoration: none; color: white; } ???????????#nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;} ???????????#nav li { float:left; } ???????????#nav li.active { background:red; } ???????????#nav li:hover { background:#09f; } ???????????#nav li a{ padding: 5px 10px; } ???body ???????div#nav ???????????ul ???????????????li.active ???????????????????a(href=‘javascript:;‘) 首页 ???????????????li ???????????????????a(href=‘javascript:;‘) 玄幻小说 ???????????????li ???????????????????a(href=‘javascript:;‘) 修真小说 ???????????????li ???????????????????a(href=‘javascript:;‘) 都世小说 ???????????????li ???????????????????a(href=‘javascript:;‘) 科幻小说 ???????????????li ???????????????????a(href=‘javascript:;‘) 网游小说编译( jade index.jade -P -w )之后的效果: -w: 实时监控文件的修改，保存之后立刻刷新结果，也就是现代前端开发中很流行的热加载技术
五、解释变量
1 doctype html 2 html 3 ????head 4 ????????meta(charset=‘utf8‘) 5 ????????- var title = ‘jade模板引擎学习-by ghostwu‘; 6 ????????title #{title.toUpperCase()} 7 ????????style. 8 ????????????* { margin : 0; padding: 0; } 9 ????????????li { list-style-type: none; }10 ????????????a { text-decoration: none; color: white; }11 ????????????#nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}12 ????????????#nav li { float:left; }13 ????????????#nav li.active { background:red; }14 ????????????#nav li:hover { background:#09f; }15 ????????????#nav li a{ padding: 5px 10px; }16 ????body17 ????????div#nav18 ????????????ul19 ????????????????li.active20 ????????????????????a(href=‘javascript:;‘) 首页21 ????????????????li22 ????????????????????a(href=‘javascript:;‘) 玄幻小说23 ????????????????li24 ????????????????????a(href=‘javascript:;‘) 修真小说25 ????????????????li26 ????????????????????a(href=‘javascript:;‘) 都世小说27 ????????????????li28 ????????????????????a(href=‘javascript:;‘) 科幻小说29 ????????????????li30 ????????????????????a(href=‘javascript:;‘) 网游小说#{}： 可以解释变量, toUpperCase():变量转大写
把json文件的数据在编译的时候传递到模板,
新建data.json文件数据
{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:
1 doctype html2 html3 ????head4 ????????meta(charset=‘utf8‘)5 ????????- var title = ‘jade模板引擎学习-by ghostwu‘;6 ????????title #{title.toUpperCase()}7 ????body8 ????????h3 #{content}编译命令：jade index2.jade -P -O data.json -O 指定一个json文件，把json文件的数据传递到模板
编译后的结果：
1 <!DOCTYPE html> 2 <html> 3 ??<head> 4 ????<meta charset="utf8"> 5 ????<title>JADE模板引擎学习-BY GHOSTWU</title> 6 ??</head> 7 ??<body> 8 ????<h3>跟着ghostwu学习jade</h3> 9 ??</body>10 </html>
[js高手之路]Node.js模板引擎教程-jade速学与实战1
原文地址：http://www.cnblogs.com/ghostwu/p/7531956.html