本地运行 Pug 文件

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


思路是先用pug-cli编译Pug文件,再用http-serverhtml在本地跑起来


全局安装 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-clihttp-server 同时跑起来,就可以实现更新 Pug 文件之后,刷新页面就可以看到最新改动

原文作者: dgb8901,yinxing

原文链接: https://www.itwork.club/2020/08/19/serve-pug-file-locally/

版权声明: 转载请注明出处

为您推荐

体验小程序「跟我记账」

关注公众号「特想学英语」

在 Leaflet 地图上画线