站内搜索:
首页 >> 前端 >> 内容
pug之HTML模板引擎安装编译教程

时间:2017/12/2 12:00:11

最近项目里用到 pug 而且感觉用着也很爽,写起html 来要轻便很多,顺便研究了下编译

pug 原名 jade ,搜索pug 相关的资料很少,所以在这里记录下

1、首先要通过node.js的npm来安装pug,直接在cmd里面输入npm install -g pug 前提是你安装了node和npm (网上安装教程很多,这里就不赘述了),还需要安装cli npm install -g pug-cli ,不然会出现pug not found。 -g表示全局安装

2、写一个test.pug文件,在cmd里进入test.pug的目录下,输入pug test.pug 回车即可出现rendered test.html。输入pug -P -w test.pug比较好,因为输出的html格式会好看,并且是被监听的,修改test.pug的时候,只要保存,html会及时更新。

pug之HTML模板引擎安装编译教程

test.pug简单代码如下:

doctype html  

head  
    meta(charset='utf-8')  
    title First file of pug  
body  
    h1 This is my first pug  
    p  
        .p1   
        p that some content in here  
            i point  

编译完成后的html

<!DOCTYPE html>  
<head>  
  <meta charset="utf-8">  
  <title>First file of pug</title>  
</head>  
<body>  
  <h1>This is my first pug</h1>  
  <p>  
    <p class="p1"> </p>  
    <p>that some content in here<i>point</i></p>  
  </p>  
</body>  

是不是少写了不少代码

  • 上一篇:Filter链的使用及FilterConfig总结(代码实例)
  • 下一篇:DOM中的事件模拟、模拟鼠标事件、模拟键盘事件、自定义DOM事件、ie中的时间模拟
  • 返回顶部