Jade是一款基于haml的html模版引擎，采用Java cript实现，可以方便地 在Node.js、Yeoman等框架中使用，已改名为pug
1. 全局安装
npm install jade -g
-g代表全局安装，如果安装出错，可能是权限问题，在前面加上sudo
sudo npm install jade -g
下载的时候可能会有点慢，所以在此之前可以下下载一个淘宝镜像，毕竟这些都是国外的东西，每次安装的时候都要翻墙，而淘宝镜像类似于一比一还原国外的中国地址，从这上面下载不需要翻墙，会必将快。
首先安装淘宝镜像
$ npm install -g cnpm
然后全局安装jade
sudo cnpm install jade -g
2. 创建文件，后缀名为jade
<div style="text-align:center">
image.png
</div>
3. 在控制台，进入当前文件的文件夹下，输入命令
jade -P -w test.jade
-P 代表不压缩HTML
-w 监听文件变化，在test.jade里面输入东西保存之后，会自动生成一个test.html文件
4. jade 语法
1.jade通过缩进关系，代替以往HTML的层级包含关系。注意要统一使用Tab或者空格缩进，不要混用
- 内联书写层级
a: img
在HTML里面会解析成
<a><img></a>
- style属性
div(style={width:"100px",height:"100px"})
解析后
<div style="width:100px;height:100px"></div>
- 使用“-”来定义变量，使用“=”把变量输出到元素内，通过#{var}插到相应标签里面
-var a = 9;
p a的值为#{a}
解析后
<p>a的值为9</p>
- 文本 通过在文字前添加符号"|"可以让jade原样输出内容，在HTML标记后，通过空格隔开。
不加“|”是，gg会被当成自定义标签解析
- 文本 通过在文字前添加符号"|"可以让jade原样输出内容，在HTML标记后，通过空格隔开。
p
gg
解析后
<p>
<gg></gg>
</p>
加上“|”，就是内容，而且可以多行写
p
| gg
解析后
<p>gg</p>
注释。可以通过双斜杠进行注释
一种是能被解析的注释 ---- //
一种是不能被解析的注释 ---- //-for循环
-for(var i = 0;i < 3;i++)
p 这是for循环中的span#{i}
解析后
<p>这是for循环中的span0</p>
<p>这是for循环中的span1</p>
<p>这是for循环中的span2</p>
8.for in 循环
-var str = ["这是字符串1","这是字符串2","这是字符串3"];
for val in str
p #{val}
解析后
<p>这是字符串1</p>
<p>这是字符串2</p>
<p>这是字符串3</p>
9.for in 解析对象
-var obj = [{name:"张三",age:"18"},{name:"李四",age:"19"},{name:"王二",age:"20"}];
for item in obj
p 姓名是#{item.name},年龄是#{item.age}
解析后
<p>姓名是张三,年龄是18</p>
<p>姓名是李四,年龄是19</p>
<p>姓名是王二,年龄是20</p>
- if 判断
-var flag = true;
if flag
p flag是true
else
p flag是false
解析后
<p>flag是true</p>
-11. switch……case语句
-var a = 3;
case a
when 1
p a的值是1
when 1
p a的值是1
default
p a的值是其他值
解析后
<p>a的值是其他值</p>
解析后
<ul>
<li>这里是ul里面的li 0</li>
<li>这里是ul里面的li 1</li>
<li>这里是ul里面的li 2</li>
</ul>
<p>宠物的名字是大黄,它的性别是 公</p>
- mixin混合模式
mixin list
ul
-for(var i = 0;i < 3;i++)
li 这里是ul里面的li #{i}
+list
mixin pet(name,sex)
p 宠物的名字是#{name},它的性别是 #{sex}
+pet("大黄","公")
解析后
<p>flag是true</p>
13.引入script文件
script(type="text/javascript").
function(){
console.log(11111)
}
解析后
<script type="text/javascript">
function(){
console.log(11111)
}
</script>
解析后
<p>flag是true</p>
14.添加类名和id名
div.box 带有类名为box的div
div#box 带有id名为box的div
div.box#box1 带有类名和id名为box的div
解析后
<div class="box">带有类名为box的div</div>
<div id="box">带有id名为box的div</div>
<div id="box1" class="box">带有类名和id名为box的div</div>
