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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。