如何让 Express 输出格式良好的 HTML？
Posted
技术标签:
【中文标题】如何让 Express 输出格式良好的 HTML？【英文标题】：How can I get Express to output nicely formatted HTML? 【发布时间】：2011-07-13 17:02:37 【问题描述】：在使用 Express for Node.js 时，我注意到它输出的 html 代码没有任何换行符或制表符。虽然下载起来可能效率更高，但在开发过程中可读性不是很好。
如何让 Express 输出格式正确的 HTML？
【问题讨论】：
【参考方案1】：在您的主要app.js 或它的位置：
Express 4.x
if (app.get('env') === 'development')
app.locals.pretty = true;
Express 3.x
app.configure('development', function()
app.use(express.errorHandler());
app.locals.pretty = true;
);
Express 2.x
app.configure('development', function()
app.use(express.errorHandler());
app.set('view options', pretty: true );
);
我将漂亮的印刷品放在development 中，因为你会希望production 中的“丑陋”更高效。确保在生产中部署时设置环境变量NODE_ENV=production。这可以通过您在package.json 的“脚本”字段中使用的sh 脚本来完成，并在开始时执行。
快递3changed这是因为：
不再需要“视图选项”设置，app.locals 是与 res.render() 合并的局部变量，所以 [app.locals.pretty = true 与传递 res.render(view , 漂亮：真 )。
【讨论】：
请将接受的答案更改为此，因为它是迄今为止的正确答案。 这行得通，但我必须安装一堆额外的依赖项，即promise、uglify-js、css 和lexical-scope，然后它才能再次运行（它会构建，但会崩溃应第一次请求）。我只添加了那一行。
如何在 Express 4.x 中做到这一点？
@Antoniosalvati 试试app.locals.pretty = true
这是一个很棒的答案，正是我想要的。看到这对于不同版本的 Express 是如何完成的令人耳目一新。我搜索了其他问题，并找到了未提及 Express 版本的答案。【参考方案2】：
在 Jade/Express 中“漂亮格式”的 html 输出：
app.set('view options', pretty: true );
【讨论】：
很棒的解决方案！我希望它也能匹配布局/页面之间的缩进级别。 过时了。 Express 3 的工作方式略有不同，请参阅 EhevuTov 撰写的帖子。【参考方案3】：Jade 本身有一个“漂亮”的选项：
var jade = require("jade");
var jade_string = [
"!!! 5",
"html",
" body",
" #foo I am a foo div!"
].join("\n");
var fn = jade.compile(jade_string, pretty: true );
console.log( fn() );
...给你这个：
<!DOCTYPE html>
<html>
<body>
<div id="foo">I am a foo div!
</div>
</body>
</html>
我似乎不是很老练，但对于我所追求的—— 能够实际调试我的视图生成的 HTML——这很好。
【讨论】：
如果您只需要调试 HTML，您总是可以使用 Webkit 或 Firebug 检查器“检查”HTML。这总是会生成格式完美的 DOM 树。 @Roshambo 是的，但是在树中导航很耗时，因为您可以更快地扫描源（有时）【参考方案4】：在 express 4.x 中，将其添加到您的 app.js：
if (app.get('env') === 'development')
app.locals.pretty = true;
【讨论】：
在这里工作 - 谢谢！就我而言，我没有设置“env”变量。您可以使用这一行将其添加到主 .js 文件中：process.env.NODE_ENV = 'development'; 如果其他答案已经给出了这个解决方案，你为什么要给出这个答案？ 我是第一个给出这个答案的，其他答案后来更新了。【参考方案5】：如果你使用控制台编译，那么你可以使用这样的东西：
$ jade views/ --out html --pretty
【讨论】：
【参考方案6】：您真的需要格式良好的 html 吗？即使您尝试输出在一个编辑器中看起来不错的东西，在另一个编辑器中也会看起来很奇怪。当然，我不知道您需要 html 来做什么，但我会尝试使用 chrome 开发工具或用于 Firefox 的 firebug。这些工具可以让您更好地了解 DOM 而不是 html。
如果您真的需要格式良好的 html，请尝试使用 EJS 而不是玉。这意味着您必须自己格式化 html。
【讨论】：
我更喜欢 ejs，因为我已经使用了一段时间。我想我只是对某些事情很挑剔。【参考方案7】：你可以使用tidy
以这个玉文件为例：
foo.jade
h1 MyTitle
p
a(class='button', href='/users/') show users
table
thead
tr
th Name
th Email
tbody
- var items = [name:'Foo',email:'foo@bar', name:'Bar',email:'bar@bar']
- each item in items
tr
td= item.name
td= item.email
现在您可以使用 node testjade.js foo.jade > output.html 处理它：
testjade.js
var jade = require('jade');
var jadeFile = process.argv[2];
jade.renderFile(__dirname + '/' + jadeFile, options, function(err, html)
console.log(html);
);
会给你一些东西。喜欢：
output.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>My Title</title><link rel="stylesheet" href="/stylesheets/style.css"/><script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script></head><body><div id="main"><div ><h1>MyTitle</h1><p><a href="/users/" class="button">show users</a></p><table><thead><tr><th>Name</th><th>Email</th></tr></thead><tbody><tr><td>Foo</td><td>foo@bar</td></tr><tr><td>Bar</td><td>bar@bar</td></tr></tbody></table></div></div></body></html
然后使用 tidy -m output.html 通过 tidy 运行它会导致：
output.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title>My Title</title>
<link rel="stylesheet" href="/stylesheets/style.css" type=
"text/css" />
<script type="text/javascript" src="../js/jquery-1.4.4.min.js">
</script>
</head>
<body>
<div id="main">
<div>
<h1>MyTitle</h1>
<p><a href="/users/" class="button">show users</a></p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>foo@bar</td>
</tr>
<tr>
<td>Bar</td>
<td>bar@bar</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
【讨论】：
【参考方案8】：根据 Oliver 的建议，这是一种查看美化 html 的快速而肮脏的方法
1) 下载tidy
2) 将此添加到您的 .bashrc
function tidyme()
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
3) 运行
$ tidyme localhost:3000/path
open 命令仅适用于 Mac。希望有帮助！
【讨论】：
不知道缩进选项...很好！我使用的是 vim 内置的格式化程序。【参考方案9】：在 express 4.x 中，将其添加到您的 app.js：
app.locals.pretty = app.get('env') === 'development';
【讨论】：
以上是关于如何让 Express 输出格式良好的 HTML？的主要内容，如果未能解决你的问题，请参考以下文章
Node JS+Express：如何在 HTML(EJS) 中定义和使用 MySQL 数据？