pug(jade) 学习笔记
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>