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. 点击表头取下标&js时间转时间戳

    1.Date.parse(new Date("2017-7-31")); 2.$("th").eq(this.cellIndex);  // 3.end($ar ...

  2. 关于XSS弹窗的小姿势

    最近快比赛了想刷刷题,做合天XSS进阶的时候遇到了过滤了alert然后还要弹窗效果的题目,这让我这个JS只学了一点点的菜鸡倍感无力.     在百度了其他资料后,发现confirm('xss')和pr ...

  3. [Qt] QString 常用函数

    1. append(), prepend() 2. count(), size(), length() 这三个函数是相同的 3. trimmed() 去掉首尾空格 4. isNull() 对未赋值的字 ...

  4. 设计数据库 ER 图太麻烦？不妨试试这两款工具，自动生成数据库 ER 图！！！

    忙,真忙 点赞再看,养成习惯,微信搜索『程序通事』,关注就完事了! 点击查看更多精彩的文章 这两个星期真是巨忙,年前有个项目因为各种莫名原因,一直拖到这个月才开始真正测试.然后上周又接到新需求,马不停 ...

  5. Linux网络服务第四章部署yum仓库

    第四章部署yum仓库服务 1.笔记 systemctl start 命令 :重启 systemctl enable 命令 :开机自启动 netstat -anput | grep 命令:查看是否开启 ...

  6. java 之 javaBean

    什么是JavaBean? JavaBean是特殊的Java类,使用J ava语言书写,并且遵守JavaBean API规范. JavaBean与其它Java类相比而言独一无二的特征: 提供一个默认的无 ...

  7. Forrester：开源APM发展势头强劲

    在企业的运营团队看来,系统的稳定性和可靠运行时间是至关重要的.因此,企业更乐意向能够负责的技术提供商购买开发完整的.有文档记录的,并且有售后支持的工具或软件. 一般来说,运营团队没有额外精力来应付新奇 ...

  8. CSS3轻松实现彩色旋转六面体动画

    一.效果预览: 二.基本思路: 1.首先这个一个自动触发的动画,因此应使用animation设计,包括自动组装和组装完成后自动旋转的过程: 2.当鼠标放上去的时候六个面及上面的字体均变色,应在六个面设 ...

  9. C++编程入门--No.7

    输出特殊图案,请在c环境中运行,看一看,Very Beautiful! 1.程序分析:字符共有256个.不同字符,图形不一样. 2.程序源代码: #include "stdio.h" ...

  10. CF--思维练习--CodeForces - 216C - Hiring Staff （思维+模拟）

    ACM思维题训练集合 A new Berland businessman Vitaly is going to open a household appliances' store. All he's ...