初识pug（jade）

1.所谓的pug就是我们之前说的jade,也就是一种通过缩进的方式来编写代码的过程，在编译的过程中，我们不需要考虑标签是否闭合的问题。此外，用这种编译方式，加快了我们写代码的速度，也为代码复用提供了便捷。

2.在学习pug基础语法之前，首先要了解pug的命令行的使用,例如：

doctype html

    html

    head

            title aaa

    body

在文件里面写上述程序，然后以xxx.pug的格式保存，再再终端命令输入 pug xxx.pug,按下回车键，我们在回到之前的项目编译器，就会发现在编译器内出现了与xxx同名的xxx.html文件，点开之后会发现html 基础格式已经打印出来了。但是这里有一个问题，基础格式的排版并不像我们平时书写的格式，这里就需要我们在将pug格式转化为HTML的时候输入命令 pug -P xxx.pug;就可以得到我们想要的格式了。为了实时自动更新出现我们修改后的代码样式，我们还可以这样输入终端命令：pug -P -w xxx.pug;不想继续更新，快捷键为：ctrl+c.

3.路径设置

如果并不希望在当前目录下输入编译后的HTML文件，而是有自定义目录的需求，则需要设置-o参数

如下设置，index.html将输入到a目录下面，如果a目录不存在，则会新建a目录：

pug index.pug -o a

4.重命名：

默认地，编译后的HTML与pug文件同名。如果需要重命名，则可以进行如下设置

通过如下设置，可以同时设置路径和名称

[注意]这里的路径必须提前建立好，否则不会成功

pug

最终，test.html文件被保存到templates目录下。

5.批量编译：

假设编译href下的所有pug文件，则可以这样写：pug href           .

6.结构语法：

标签

【树状】

在默认情况下，在每行文本的开头（或者紧跟白字符的部分）书写这个 HTML 标签的名称。使用缩进来表示标签间的嵌套关系，这样可以构建一个 HTML 代码的树状结构

ul

li Item A

li Item B

li Item C

【内联】

为了节省空间， Pug 嵌套标签提供了一种内联式语法

a: img

【自闭合】

Pug知道哪些元素是自闭合的，也可以通过在标签后加上/来明确声明此标签是自闭合的（例如img input 等）

内容

Pug 提供了三种常用的方式来放置内容

【管道文本】

这是最简单的向模板添加纯文本的方法。只需要在每行前面加一个|字符，这个字符在类 Unix 系统下常用作“管道”功能，因此得名

| 纯文本当然也可以包括 HTML内容。

p| 但它必须单独起一行。

【标签内文本】

这实际上是最常见的情况，文本只需要和标签名隔开一个空格即可

p 纯文本当然也可以包括 HTML 内容。

【嵌入大段文本】

有时可能想要写一个大段文本块。比如嵌入脚本或者样式。只需在标签后面接一个.即可

[注意]不要有空格

script.if(usingPug)

console.log('这是明智的选择。')elseconsole.log('请用 Pug。')

属性

标签属性和 HTML 语法非常相似，它们的值就是普通的 JavaScript 表达式。可以用逗号作为属性分隔符，也可以不加逗号

a(href='baidu.com') 百度='\n'a(class='button'href='baidu.com') 百度='\n'a(class='button', href='baidu.com') 百度

【多行属性】

如果有很多属性，可以把它们分几行写

input(

type='checkbox'name='agreement'checked)

【长属性】

如果有一个很长的属性，并且JavaScript运行时引擎支持ES2015模板字符串，可以使用它来写属性值

input(data-json=`{"非常":"长的","数据":true}`)

注释：

单行注释用“//”,不输出注释用“//-”,块注释写法--

body

        //

          随便写多少字

          都没关系。

今天学的就先介绍到这里，下期继续。