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>

 

posted @ 2020-04-21 16:13  cecelia  阅读(313)  评论(0编辑  收藏  举报