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. DZ注册登录流程梳理

    用户注册流程第一步:/source/class/class_member.php: on_register注册入口 if(!$activation) {//不为空,说明用户已经注册过 //将用户注册到 ...

  2. Nagios基本搭建

    Nagios简述: 1.一款用来监视系统和网络的开源软件 2.利用其从多的插件实现对本机和远端服务的监控 3.当被监控对象异常时,回及时向管理员警告 4.提供一批预设好的监控插件,用户可以直接调用 5 ...

  3. Redis(二)：单机数据库的实现

    概要 本部分内容主要是研究单机数据库.分别介绍单机数据库的实现原理,数据库的持久化,Redis事件,服务器维护管理客户端以及单机服务器的运作机制. 数据库 数据库结构 Redis数据库由redis.h ...

  4. Linux下进程的创建（system(); fork(); exec*()）

    0. system(); system()函数通过调用shell程序来执行所指向的命令(效率低),相当于先fork(),再execve(): 特点:原进程和子进程各自运行,且原进程需要等子进程运行完后 ...

  5. Mybatis详解系列(五)--Mybatis Generator和全注解风格的MyBatis3DynamicSql

    简介 Mybatis Generator (MBG) 是 Mybatis 官方提供的代码生成器,通过它可以在项目中自动生成简单的 CRUD 方法,甚至"无所不能"的高级条件查询(M ...

  6. HDU 1159.Common Subsequence【动态规划DP】

    Problem Description A subsequence of a given sequence is the given sequence with some elements (poss ...

  7. CodeForces - 1058A. In Search of an Easy Problem

    这题,全零是esay有1是hard,真难呀. #include<bits/stdc++.h> using namespace std; int main(){ int n,i,x,flag ...

  8. POJ Building a Space Station 最小生成树

    Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 15664   Accepted: 6865 Description You ...

  9. Spring Boot Actuator H2 RCE复现

    0x00 前言 Spring Boot框架是最流行的基于Java的微服务框架之一,可帮助开发人员快速轻松地部署Java应用程序,加快开发过程.当Spring Boot Actuator配置不当可能造成 ...

  10. django最全面的知识点,直接开发完整手机购物商城练手,

    带手机验证码登陆, 带全套购物车系统 带数据库 前后端分离开发 带定位用户功能 数据库代码为本地制作好了 带支付宝支付系统 带django开发服务器接口教程 地址: https://www.duans ...