Home 前端/建站服务器/数据库 使用pug加速html编写效率

使用pug加速html编写效率

by Kevin
0 comment 56 views

安装pug(已经安装nodejs前提下)

$ npm install pug-cli -g
$ pug --help

从pug文件生成html文件并美化(注意大写P)

$ pug index.pug -P

如果是第二次运行,则新的文件替换掉旧文件

pug自动编译成html

$ pug -w . -o ./ -P

-w 表示 watching . 表示所有路径 -o 表示 output ./ 表示输出路径(当前) -P 表示pretty

ctrl+c 退出

pug代码例子

doctype html
html(lang="en") 
  head 
    meta(charset='UTF-8')
    meta(http-equiv='X-UA-Compatible' content='IE=edge')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    title pug to html
    link(rel="stylesheet", href="style.css")
  body
    header 
      .header__logo-box 
        a(href="/") 
          img(src="img/logo.svg", alt="logo")
      nav.header__nav 
        input#nav__toggle.nav__checkbox(type="text")
        label.nav__buton(for="nav__toggle") 
          span.nav__icon 
        .nav__background
        ul.nav__menu 
          li.menu-item 
            a.menu-item__text(href="/") home 
          li.menu-item 
            a.menu-item__text(href="/") tutorials
          li.menu-item 
            a.menu-item__text(href="/") blogs
          li.menu-item 
            a.menu-item__text(href="/") contact
        

转化为html的代码

<!DOCTYPE html>
<html lang="en"> 
  <head> 
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pug to html</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header> 
      <div class="header__logo-box"> <a href="/"> <img src="img/logo.svg" alt="logo"></a></div>
      <nav class="header__nav"> 
        <input class="nav__checkbox" id="nav__toggle" type="text">
        <label class="nav__buton" for="nav__toggle"> <span class="nav__icon"> </span></label>
        <div class="nav__background"></div>
        <ul class="nav__menu"> 
          <li class="menu-item"> <a class="menu-item__text" href="/">home </a></li>
          <li class="menu-item"> <a class="menu-item__text" href="/">tutorials</a></li>
          <li class="menu-item"> <a class="menu-item__text" href="/">blogs</a></li>
          <li class="menu-item"> <a class="menu-item__text" href="/">contact</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

Related Articles

Leave a Comment