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>

pug(jade) 学习笔记的更多相关文章

  1. Jade学习笔记

    初学nodejs,折腾过用handlebars做模板,后来隔了一段重新学习,用了jade,真心简洁……记录一些学习笔记,以备复习. jade是基于缩进的,所以tab与space不能混用: 属性的设置: ...

  2. jade 学习笔记 - gulp 自动编译

    实时监控   jade -P -w .\test1.jade sublime 分栏,可以看到实时修改情况     1. 元素写法 doctype html <!--[if IE8]>< ...

  3. jade模板引擎学习笔记（WebsStorm9.0.3+ nodejs+express+jade）

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  4. Nodejs学习笔记（三）——一张图看懂Nodejs建站

    前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试 ...

  5. Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  6. [转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

  7. 搭建Vue2+Vuex+Webpack+Pug(jade)+Stylus环境

     一.开发环境配置 开始之前,假设你已经安装了最新版本的 node 和 npm. 全局安装 vue-cli 和 webpack : npm install vue-cli webpack -g 创建工 ...

  8. Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例

    前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...

  9. VueJs 学习笔记

    VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库)  VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) ...

随机推荐

  1. MySQL基础知识和常用命令总结

    说明:以下内容是阅读书籍<<MySQL必知必会>>的摘要和总结 检索数据 排序检索数据 过滤数据 使用通配符过滤 使用正则表达式进行搜索 创建计算字段 使用数据处理函数 汇总数 ...

  2. 在php中如何实现cookie即时生效，不用刷新就可以使用

    参考:https://www.jianshu.com/p/0468ef5dbf4d 今天在用php设置cookie的时候,发现cookie如果只是赋值一次的话,要手动刷新一下浏览器才能把数据及时更新, ...

  3. apache虚拟主机配置-域名/IP和端口两种配置

    由于百度上有非常详细的资料,我这里就转载而已:https://jingyan.baidu.com/article/4f7d5712d48a191a201927e0.html

  4. tp5.0--多个条件查询全部数据

    用where来查询的话(非主键): 查找:

  5. 设计可靠的udp

    推荐链接: https://www.cnblogs.com/lixiang-share/p/7152870.html

  6. [Qt]执行cmd命令

    要加 /c 参数 QProcess p; p.start("cmd", QStringList()<<"/c"<<"ping ...

  7. java1-3总结 19201421-吴志越

    关于最近几次作业,从C语言到Java的过渡,也就是从面向过程到面向对象的过渡.其中,一共有三次作业,前俩次可能更加偏向于过程的设计,利用C语言的想法就可以完成,但是,从需要使用类的开始,就逐渐向对象偏 ...

  8. .net 使用TCP模拟UDP广播通信加强广播通信的稳定性

    应用场景:当每一台终端开启程序后发出消息,其他终端必须收到消息然后处理 思路1:使用UDP广播.     缺点:UDP广播信号不稳定,无法确定每一台机器能接收到信号 思路2:将一台主机作为服务器,使用 ...

  9. 微服务为什么一定要用docker

    引言 早在2013年的时候,docker就已经发行,然而那会还是很少人了解docker.一直到2014年,Martin Fowler提出了微服务的概念,两个不相干的技术终于走在了一起,创造了今天的辉煌 ...

  10. qcow2快照原理

    关键术语:cluster 一个Qcow2 img文件由固定大小的单元组成,该单元称为cluster,默认大小为65536bytes/64Ksector 数据块读写的最小单元,大小为512字节host ...