from: https://www.cnblogs.com/xiaohuochai/p/7222227.html
对于一些嵌套层次较深的页面，在后期维护和修改时，一不小心少了一个尖括号，或者某个标签的开始和闭合没有对应上，就会导致DOM结构的混乱甚至是错误。所以，有人发明了HAML，它最大的特色就是使用缩进排列来代替成对标签。受HAML的启发，pug进行了javascript的实现。
Pug原名不叫Pug，是大名鼎鼎的jade，后来由于商标的原因，改为Pug，哈巴狗。其实只是换个名字，语法都与jade一样。Pug有它本身的缺点——可移植性差，调试困难，性能并不出色，但使用它可以加快开发效率。
全局安装pug-cli命令行工具
npm i -g pug-cli
项目中，安装pug
npm i pug
新建index.pug
html
head
title aaa
body
在cmd中运行 pug index.pug, 会在同级目录下生成index.html
<html><head><title>aaa</title></head><bodypug></bodypug></html>
使用pug -w功能可以实现自动编译。保存.pug文件后，.html文件中的内容自动更新。
【标注HTML】如上所示，pug默认编译出的HTML文件是压缩版的。如果要编译标准版的HTML文件，需要设置-P参数
pug index.pug -P
【路径设置】如果并不希望在当前目录下输入编译后的HTML文件，而是有自定义目录的需求，则需要设置-o参数。
pug index.pug -o outputDir
【重命名】
默认地，编译后的HTML与pug文件同名。如果需要重命名，则可以进行如下设置。
pug <xx.pug> <yyy.html>