一些简单的页面可以通过Server渲染 Pug 文件实现。不过调试的时候比较麻烦：得把Server 项目跑起来，渲染的数据从哪里来也是个问题。如果能不依赖Server 项目去调试 Pug 文件就好了

思路是先用pug-cli编译Pug文件，再用http-server把html在本地跑起来

全局安装 pug-cli

pug-cli

1

npm install pug-cli -g

编译 pug 文件

1
2

#!/usr/bin/env sh
pug -w . -O options.js -o ./html -P

-w, –watch watch files for changes and automatically re-render
-O, –obj str|path JSON/JavaScript options object or file
-o, –out dir output the rendered HTML or compiled JavaScript to dir
-P, –pretty compile pretty HTML output

命令里的 options.js就是要塞到pug 文件里的参数：

1
2
3
4
5
6
7
8
9
10

exports.orderInfo = {
  user_name: 'aaa',
  email: 'aaa@aaa.com'
}

exports.competitions = [
  {
    title: 'ccc'
  }
]

查看 HTML

1

http-server .

访问http://localhost:8080/就可以在浏览器看到页面了

把 pug-cli 和 http-server 同时跑起来，就可以实现更新 Pug 文件之后，刷新页面就可以看到最新改动