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. CSRF与平行越权的区别

    .CSRF攻击者不需要登录,越权攻击者也得登录,只是没有做针对性的控制: .CSRF攻击者自己不访问受攻击页面,诱导受害者在登录被攻击系统后点击攻击页面:越权攻击者可以直接访问受攻击页面: .CSRF ...

  2. union 的概念及在嵌入式编程中的应用

    union 概念 union 在中文的叫法中又被称为共用体,联合或者联合体,它定义的方式与 struct 是相同的,但是意义却与 struct 完全不同,下面是 union 的定义格式: union ...

  3. Jetson AGX Xavier刷机

    1. 准备一台电脑做主机(host),运行Ubuntu系统,我用的是虚拟机,运行的是Ubuntu 18.04系统. 2. 主机更换apt-get源,参见https://www.cnblogs.com/ ...

  4. Docker 部署 halo 启动时，MySql 连接不上

    原因 halo 是部署在 docker 容器内部的,而 MySql 是部署在"宿主机"上的,docker默认的网络模式是bridge,容器内127.0.0.1访问不到的,把网络模式 ...

  5. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  6. 第三方库PyYAML

    建议参考PyYAML Documentation来源:http://pyyaml.org/wiki/PyYAMLDocumentation:http://blog.csdn.net/conquer07 ...

  7. The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 K题 center

    You are given a point set with nn points on the 2D-plane, your task is to find the smallest number o ...

  8. FarmCraft

    题意:mhy住在一棵有n个点的树的1号结点上,每个结点上都有一个妹子.mhy从自己家出发,去给每一个妹子都送一台电脑,每个妹子拿到电脑后就会开始安装zhx牌杀毒软件,第i个妹子安装时间为ci.树上的每 ...

  9. 「newbee-mall新蜂商城开源啦」 前后端分离的 Vue 版本即将开源

    新蜂商城 Vue 版本 2019 年 10 月份我在 GitHub 开源仓库中上传了新蜂商城项目的所有源码,至今已经有小半年的时间了,感兴趣的可以去了解一下这个 Spring Boot 技术栈开发的商 ...

  10. OSG程序设计之osg::NodeVisitor

    本文所有内容来自<OpenSceneGraph三维渲染引擎设计与实践>一书. 本文主要讨论的是OSG中节点的访问. 对于节点的访问是从节点接收一个访问器开始的,用户执行某个节点的accep ...