pug(jade) 学习笔记
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) 学习笔记的更多相关文章
- Jade学习笔记
初学nodejs,折腾过用handlebars做模板,后来隔了一段重新学习,用了jade,真心简洁……记录一些学习笔记,以备复习. jade是基于缩进的,所以tab与space不能混用: 属性的设置: ...
- jade 学习笔记 - gulp 自动编译
实时监控 jade -P -w .\test1.jade sublime 分栏,可以看到实时修改情况 1. 元素写法 doctype html <!--[if IE8]>< ...
- jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- Nodejs学习笔记(三)——一张图看懂Nodejs建站
前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试 ...
- Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例
目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...
- [转]Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例
本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...
- 搭建Vue2+Vuex+Webpack+Pug(jade)+Stylus环境
一.开发环境配置 开始之前,假设你已经安装了最新版本的 node 和 npm. 全局安装 vue-cli 和 webpack : npm install vue-cli webpack -g 创建工 ...
- Nodejs学习笔记(十五)—Node.js + Koa2 构建网站简单示例
前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...
- VueJs 学习笔记
VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库) VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) ...
随机推荐
- MySQL基础知识和常用命令总结
说明:以下内容是阅读书籍<<MySQL必知必会>>的摘要和总结 检索数据 排序检索数据 过滤数据 使用通配符过滤 使用正则表达式进行搜索 创建计算字段 使用数据处理函数 汇总数 ...
- 在php中如何实现cookie即时生效,不用刷新就可以使用
参考:https://www.jianshu.com/p/0468ef5dbf4d 今天在用php设置cookie的时候,发现cookie如果只是赋值一次的话,要手动刷新一下浏览器才能把数据及时更新, ...
- apache虚拟主机配置-域名/IP和端口两种配置
由于百度上有非常详细的资料,我这里就转载而已:https://jingyan.baidu.com/article/4f7d5712d48a191a201927e0.html
- tp5.0--多个条件查询全部数据
用where来查询的话(非主键): 查找:
- 设计可靠的udp
推荐链接: https://www.cnblogs.com/lixiang-share/p/7152870.html
- [Qt]执行cmd命令
要加 /c 参数 QProcess p; p.start("cmd", QStringList()<<"/c"<<"ping ...
- java1-3总结 19201421-吴志越
关于最近几次作业,从C语言到Java的过渡,也就是从面向过程到面向对象的过渡.其中,一共有三次作业,前俩次可能更加偏向于过程的设计,利用C语言的想法就可以完成,但是,从需要使用类的开始,就逐渐向对象偏 ...
- .net 使用TCP模拟UDP广播通信加强广播通信的稳定性
应用场景:当每一台终端开启程序后发出消息,其他终端必须收到消息然后处理 思路1:使用UDP广播. 缺点:UDP广播信号不稳定,无法确定每一台机器能接收到信号 思路2:将一台主机作为服务器,使用 ...
- 微服务为什么一定要用docker
引言 早在2013年的时候,docker就已经发行,然而那会还是很少人了解docker.一直到2014年,Martin Fowler提出了微服务的概念,两个不相干的技术终于走在了一起,创造了今天的辉煌 ...
- qcow2快照原理
关键术语:cluster 一个Qcow2 img文件由固定大小的单元组成,该单元称为cluster,默认大小为65536bytes/64Ksector 数据块读写的最小单元,大小为512字节host ...