pug学习

时间 2019-11-16

标签 pug 学习繁體版

原文原文链接

pug学习

jade(pug)
因为商标版权问题，jade已经更名为Pug。
Pug 是一个高性能的模板引擎，它是用 JavaScript 实现的，而且能够供 Node 使用,固然还支持其余语言。html

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

pug优势

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

安装

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

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

1. pug学习
2. Pug学习笔记
3. pug新手学习
4. pug 学习笔记
5. 前端学习——Pug模板
6. [Pug] Template Engine -- Jade/ Pug
7. Pug
8. jade （pug）
9. 初识pug（jade）
10. Ejs和pug
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议