pug学习

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了pug学习相关的知识,希望对你有一定的参考价值。

pug学习

jade(pug)
由于商标版权问题,jade已经改名为Pug。
Pug 是一个高性能的模板引擎,它是用 javascript 实现的,并且可以供 Node 使用,当然还支持其他语言。

文件后缀名为.pug(.jade)

pug优点

  • 可读性高
  • 灵活的缩进
  • 块展开
  • 代码默认经过编码处理(转义),安全性高
  • 运行时和编译时上下文错误报告
  • 支持命令行编译
  • 支持html5模式
  • 在内存中缓存(可选)
  • 原生支持 Express
  • 合并动态和静态标签类
  • 过滤器

安装

npm安装 建议安装个nrm来进行源管理

npm install pug -g
npm install pug-cli -g

测试demo

为了方便编写代码,最好把编译器的tab设置:2.

// index.jade

doctype html
html
  head
    title jade test
  body
    h2 jade study

粗暴的编译方法

// index.html
<!DOCTYPE html><html><head><title>jade test</title></head><body><h2>jade study    </h2></body></html>

发现编译后的代码不具备可读性

pug -- help
 Options:
     -P, --pretty           compile pretty HTML output ## 输出漂亮结构的HTML
    -D, --no-debug         compile without debugging (smaller functions) ## 不带调试的编译
    -w, --watch            watch files for changes and automatically re-render ## 对某个文件的变动保持监控
    -E, --extension <ext>  specify the output file extension ## 指定输出文件扩展名
    -s, --silent           do not output logs ## 不输出日志
// 重新编译
pug -P index.jade
<!DOCTYPE html>
<html>
  <head>
    <title>jade test</title>
  </head>
  <body>
    <h2>jade study    </h2>
  </body>
</html>

自动编译
只是为了学习,这里只要设置-w -P .开发中通过打包工具来进行自动编译.

pug pug -o . -w -P



以上是关于pug学习的主要内容,如果未能解决你的问题,请参考以下文章

pug新手学习

我不能用express.js执行jade(pug)

jade(pug)学习笔记(待填充.......)

我最喜欢的模板jade(pug)学习和使用

如何将数组变量从javascript传递到pug文件?

Visual Studio代码是否不突出显示.pug文件?