jade 也就是现在更名后的 pug，是一款基于 Nodejs 环境的模板引擎，核心作用是用缩进式极简语法编写页面模板，编译之后输出标准 HTML 代码，它可以减少大量重复尖括号标签的书写，适合配合 Express 等后端框架做服务端页面渲染，也能在前端工程化项目里面用来预编译页面。很多开发者选择 jade，是因为它语法干净，支持变量循环条件判断，还可以复用模板片段，相比原生 HTML 编写，在复杂页面项目里能明显提升开发效率，不过要注意官方后续已经把项目名称修改为 pug，老项目依旧会保留 jade 这个叫法，学习的时候需要区分新旧版本的安装命令和语法差异。学习 jade 可以先搭建 Nodejs 运行环境，再安装对应的包，接着熟悉缩进语法，练习变量逻辑标签，然后做模板继承和片段复用，最后接入项目完成编译输出，掌握这套流程之后，就可以独立使用 jade 完成页面模板开发。
基础环境准备
| 项目 | 说明 |
|---|---|
| 运行依赖 | Nodejs npm |
| 旧包名 | jade |
| 新包名 | pug |
| 编译方式 | 命令行编译 代码内调用编译 API |
| 适用框架 | Express Webpack Gulp 独立脚本 |
第一步 安装 Nodejs，官网下载对应系统安装包，安装完成之后打开终端，输入 node v 和 npm v，确认版本可以正常打印，代表环境准备完成。
第二步 新建项目文件夹，在文件夹内部打开终端，执行 npm init 初始化 package.json 文件。
第三步 安装 jade 依赖，旧版本项目执行 npm install jade，新项目推荐直接安装 pug，因为 jade 项目已经停止维护。
核心语法深度讲解
jade 最大特点是依靠缩进识别层级，不再书写尖括号闭合标签，层级错误会直接编译报错，这是新手最容易踩坑的地方。
1 基础标签写法
直接写标签名称，后面可以跟文本内容，比如 div 后面直接写页面文字，嵌套标签只需要增加一层缩进。
2 id 和 class 写法
id 使用 符号，class 使用点符号，写在标签名称后面，比如 divbox.main，编译之后生成带 id 和 class 的 div 标签。
3 属性写法
属性写在圆括号内部，多个属性用逗号分隔，比如 a (href="/index" title="首页")，编译之后输出标准 a 标签属性。
4 变量插值
使用等号输出变量内容，支持转义输出，不转义输出使用感叹号加等号，适合需要输出原生 HTML 片段的场景。
5 逻辑控制
支持 if 条件判断 each 循环遍历数组对象 while 循环，直接写关键字，后面写判断条件，内部代码缩进作为逻辑块。
6 注释
单行注释使用双斜杠，编译之后不会输出到 HTML，多行注释使用双斜杠加短横线，注释内容同样不会编译进页面。
进阶功能
1 模板继承
使用 extends 引入父模板，block 定义可替换区块，子模板重写 block 内容，适合统一页面头部底部，减少重复代码。
2 包含片段
include 指令引入独立 jade 片段文件，比如公共导航页脚，适合拆分模块化页面组件。
3 Mixin 混合块
mixin 相当于可复用函数，可以传入参数，重复生成同类型标签结构，适合列表卡片这类重复 UI 结构。
4 过滤器
支持 markdown 等过滤器，可以在 jade 模板内部直接编写其他类型文本，编译时转换成对应内容。
编译实操步骤
方式一 命令行编译
在终端执行 jade 源文件.jade，就会在同目录生成同名 html 文件，也可以增加参数批量编译整个文件夹。
方式二 代码调用编译
在 js 文件引入 jade 模块，调用 render 或者 renderFile 方法，传入模板内容和数据对象，拿到编译完成的 html 字符串，一般配合 Express 后端渲染页面使用。
方式三 工程化集成
在 Webpack Gulp 等构建工具配置 loader，项目运行的时候自动监听 jade 文件变化，实时编译刷新，适合前端开发自动化流程。
常见踩坑要点
1 缩进必须统一，不能混用空格和 tab，否则编译直接报错
2 标签层级不能错乱，嵌套层级完全由缩进决定
3 变量输出默认开启 HTML 转义，渲染富文本的时候记得使用非转义语法
4 老 jade 包和 pug 语法存在少量差异，不要把 pug 新语法直接放到旧 jade 项目运行
5 模板继承的 block 名称必须保持一致，否则页面区块不会正常替换
【常见问题】
问题 1 jade 教程里面为什么现在很多资料改名成 pug
回答 1 jade 教程对应的原项目后续因为商标相关问题正式改名为 pug，核心语法大体保留，所以现在新的 jade 教程基本都会提示新项目改用 pug 包，旧的 jade 包不再继续更新维护。
问题 2 jade 教程学习的时候一定要会 Nodejs 吗
回答 1 jade 教程所有编译运行都依赖 Nodejs 环境，不管是命令行编译还是后端渲染，都需要 Nodejs 和 npm，所以学习 jade 教程第一步就是安装配置 Nodejs 环境。
问题 3 jade 教程可以用来纯前端静态页面开发吗
回答 3 jade 教程支持独立编译静态页面，可以提前把 jade 模板编译成 html 文件，不需要后端服务，适合纯静态页面项目，只是开发阶段依旧需要 Nodejs 完成编译动作。
【免责申明】
本 jade 教程仅作为技术学习参考，jade 项目已经停止维护，相关语法和安装命令会随版本变化，实际项目开发请核对官方文档，本教程不保证所有版本完全兼容，不构成生产项目选型建议。
