Jade(Pug) — Node Template Engine，一个高性能的模板引擎，为 Node 而做，用 JavaScript 实现。
Node.js 的 Express.js 框架默认用的就是 Jade(更名为Pug)。
第一部分 背景
随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来。
为了使用户界面与业务数据分离，就产生了『模板引擎』这个概念。
模板引擎有很多, 比较有名的有jade（express默认）、ejs、hbs（ghost默认）、doT、swig等等。
『模板引擎』:
1. 模板是什么？模板就是一个模子。供你套数据，并且依据不同数据去走不同的逻辑。
2. 引擎是什么？引擎就是个处理器（编译、运行），最后输出个结果（HTML代码）的东西。
第二部分 安装配置
2.1 安装:
npm install pug-cli -g
jade --help
Usage: jade [options] [dir|file ...]
Options:
-h, --help output usage information / 输出使用信息
-V, --version output the version number / 输出版本号信息
-O, --obj javascript options object / 传输到 jade 文件中的数据对象
-o, --out output the compiled html to / 输出编译后的 HTML 到
-p, --path filename used to resolve includes / 在处理 stdio 时，查找包含文件时的查找路径
-P, --pretty compile pretty html output / 格式化编译 html 文件
-c, --client compile function for client-side runtime.js / 编译浏览器端可用的 runtime.js
-n, --name The name of the compiled template (requires --client) / 编译模板的名字
-D, --no-debug compile without debugging (smaller functions) / 关闭编译的调试选项(函数会更小)
-w, --watch watch files for changes and automatically re-render / 监听文件改变并自动刷新编译结果
--name-after-file Name the template after the last section of the file path (requires --client and overriden by --name)
--doctype Specify the doctype on the command line (useful if it is not specified by the template) / 在命令行中指定文档类型(如果在模板中没有被指定)
Examples:
# 编译整个目录
$ jade templates
# 生成 {foo,bar}.html
$ jade {foo,bar}.jade
# 在标准IO下使用jade
$ jade < my.jade > my.html
# 在标准IO下使用jade
$ echo 'h1 Jade!' | jade
# foo, bar 目录渲染到 /tmp
$ jade foo bar --out /tmp
2.2 实例 编写与运行
第一步: 打开sublime 创建studyJade.jade 保存到桌面上
doctype html
html
head
title jade
body
p studyjade
div hello jade
第二步: 打开终端执行 $ jade studyJade.jade -P(大写P: 格式化编译 html 文件), 然后桌面上会出现对应的 studyJade.html文件;
jade
studyjade
hello jade
如此反复即可达到预期效果, 但是, 如果有热跟新该多好, 面包和牛奶都会有的 !
热更新
第一步: 同上第一步;
第二步: 终端$ jade index.jade -P -w, 终端会显示
$ jade /Users/51testing/Desktop/studyJade.jade -P -w
watching /Users/51testing/Desktop/studyJade.jade
rendered /Users/51testing/Desktop/studyJade.html
第三步: 将桌面上的两个文件(.html/.jade)拖进sublime, 使用快捷键option+command+2双屏幕展示,一侧更改并
第三部分 语法及使用
3.1 语法
（1）标签、属性、注释
（2）读取数据的值（转义、非转义）
3.2 逻辑
（1）条件语句（if、unless、case）
（2）循环（each、for）
(3) 过滤器
:sass 需要安装 sass.js
:less 需要安装 less.js
:markdown 需要安装 markdown-js 或 node-discount
:cdata
:coffeescript 需要安装 coffee-script
3.3 继承和包含
（1）模板继承
（2）包含
在父模板中，用关键字“block”定义可在子模板中替换的块，每个“block”有一个名字，在子模板中，同样用关键字“block”跟上该名字定义需在该“block”中填充的内容。
Jade支持多重继承，即子模板也可以是其它模板的父模板。
3.4 jade 官网给的实例
API
var jade = require('jade');
// compile 编译
var fn = jade.compile('string of jade', options);
var html = fn(locals);
// render 渲染
var html = jade.render('string of jade', merge(options, locals));
// renderFile 渲染文件
var html = jade.renderFile('filename.jade', merge(options, locals));
更多精彩内容请关注“IT实战联盟”哦~~~
参考
Jade中文文档
Jade 模板引擎
初识前端模板引擎jade