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学习的更多相关文章

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

    深刻认识到总结知识点的重要性,不然遇到似曾相识的问题,要翻老半天的百度才能解决.20171018 pug——文字内部嵌入结构 比如: <a class = "href"> ...

  2. pug新手学习

    感觉自己有段时间没有跟新了,唉,只是一直找不到可以写的必要 其实我一直对pug特别感兴趣的,安装点我 记得全局安装pug和pug-cli就行了 在webstorm配环境记得在前面加-P a: img  ...

  3. jade（pug）学习和使用

    由于版权问题,现已改名pug.但无须担心,几乎没什么区别.就算依然使用jade也不会有太大影响. 慢慢迁移过渡即可   # 官网 https://pugjs.org # github https:// ...

  4. 我最喜欢的模板jade（pug）学习和使用

    由于版权问题,现已改名pug.但无须担心,几乎没什么区别.就算依然使用jade也不会有太大影响. 慢慢迁移过渡即可 # 官网 https://pugjs.org # github https://gi ...

  5. pug(jade) 学习笔记

    from: https://www.cnblogs.com/xiaohuochai/p/7222227.html 对于一些嵌套层次较深的页面,在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的 ...

  6. Java学习-035-JavaWeb_004 -- JSP include 指令

    inclue 指令是将不同的文件插入到 JSP 网页中,这些文件可以是文本文件.HTML文件.JSP 文件,指令语法如下: <%@include file="相对路径"%&g ...

  7. JMeter学习-013-JMeter 逻辑控制器之-如果（If）控制器

    前文简述了 JMeter 如何通过 HTTP Cookie管理器,实现了在不执行登录操作的情况下,通过 Cookie 实现登录态的操作,具体请参阅:JMeter学习-012-JMeter 配置元件之- ...

  8. cocos2dx进阶学习之屏幕适配

    背景 在学习cocos2dx时,我们在main函数中发现一句代码, #include "main.h" #include "AppDelegate.h" #in ...

  9. pug模板引擎(原jade)

    前面的话 为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示 在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致 ...

随机推荐

  1. 笨方法学Python 错误记录

    ex8:忘记输入“空格”ex9:忘记输入“冒号”ex14:%前后要空格,否则errorex21:多个函数嵌套,漏写括号)ex24:%d,漏写d,导致程序错误:"""之间的 ...

  2. 牛顿法求极值及其Python实现

    最初对于牛顿法,我本人是一脸懵的.其基本原理来源于高中知识.在如下图所示的曲线,我们需要求的是f(x)的极值: 对于懵的原因,是忘记了高中所学的点斜式,直接贴一张高中数学讲义: 因为我们一路沿着x轴去 ...

  3. 《剑指offer》面试题5 从尾到头打印链表 Java版

    书中方法一:反转应该立刻想到栈,利用一个栈完成链表的反转打印,但是用了额外的O(n)空间. public void printFromTail(ListNode first){ Stack<Li ...

  4. django的配置

    1.django的默认配置 import os # Build paths inside the project like this: os.path.join(BASE_DIR, ...) # 获取 ...

  5. vmware linux root密码破解

    centOS: 1.开机过程按上下箭头键,让系统不要进入到引导程序中, 2.按 'e' 进入到编辑模式 3.找到linux16开始的首行,在末尾加入'rw init=/bin/sh' (会出现修改密码 ...

  6. linux mysql修改数据表结构语法

    MySQL修改表的语法=========================增加列[add 列名]=========================①alter table 表名 add 列名 列类型 列 ...

  7. Maven入门指南10：Maven的生命周期和插件

    一个完整的项目构建过程通常包括清理.编译.测试.打包.集成测试.验证.部署等步骤,Maven从中抽取了一套完善的.易扩展的生命周期.Maven的生命周期是抽象的,其中的具体任务都交由插件来完成.Mav ...

  8. 【学习总结】java数据结构和算法-第二章-数据结构和算法概述

    总目录链接 [学习总结]尚硅谷2019java数据结构和算法 github:javaDSA 目录 数据结构和算法的关系 几个实际编程中的问题 线性结构和非线性结构 数据结构和算法的关系 几个实际编程中 ...

  9. CSS中的关系选择器

    关系选择器是指根据与其他元素的关系选择元素的选择器,常见的符号有空格.>.~,还 有+等,这些都是非常常用的选择器. 后代选择器:选择所有合乎规则的后代元素.空格连接. 相邻后代选择器:仅仅选择 ...

  10. gvfs错误导致tilda和thunar启动缓慢问题的解决

    tilda是一个非常轻便的下拉终端,但是安装之后启动发现要过十几秒才会出现界面.命令行启动发现报错如下: 用这条信息到处搜索也找不到有用的解答. 后来终于发现这是一个dbus超时的问题,虽然原因和这个 ...