node.js 如何让 Express 输出格式良好的 HTML？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5276892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get Express to output nicely formatted HTML?
提问by Stephen
When using Express for Node.js, I noticed that it outputs the HTML code without any newline characters or tabs. Though it may be more efficient to download, it's not very readable during development.
在 Node.js 中使用 Express 时，我注意到它输出的 HTML 代码没有任何换行符或制表符。虽然下载可能更有效，但在开发过程中可读性不强。
How can I get Express to output nicely formatted HTML?
如何让 Express 输出格式良好的 HTML？
回答by EhevuTov
In your main app.jsor what is in it's place:
在您的主要app.js或它的位置：
Express 4.x
快递 4.x
if (app.get('env') === 'development') {
app.locals.pretty = true;
}
Express 3.x
快递 3.x
app.configure('development', function(){
app.use(express.errorHandler());
app.locals.pretty = true;
});
Express 2.x
快递 2.x
app.configure('development', function(){
app.use(express.errorHandler());
app.set('view options', { pretty: true });
});
I put the pretty print in developmentbecause you'll want more efficiency with the 'ugly' in production. Make sure to set environment variable NODE_ENV=productionwhen you're deploying in production. This can be done with an shscript you use in the 'script' field of package.jsonand executed to start.
我把漂亮的印刷品放进去是development因为你会希望在production. 确保NODE_ENV=production在生产中部署时设置环境变量。这可以通过sh您在“脚本”字段中使用的脚本来完成package.json并执行以启动。
Express 3 changedthis because:
Express 3改变了这一点，因为：
The "view options" setting is no longer necessary, app.locals are the local variables merged with res.render()'s, so [app.locals.pretty = true is the same as passing res.render(view, { pretty: true }).
不再需要“视图选项”设置，app.locals 是与 res.render() 合并的局部变量，因此 [app.locals.pretty = true 与传递 res.render(view, { pretty ： 真的 }）。
回答by Jonathan Julian
To "pretty-format" html output in Jade/Express:
在 Jade/Express 中“漂亮格式”的 html 输出：
app.set('view options', { pretty: true });
回答by Kevin Frost
There is a "pretty" option in Jade itself:
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() );
...gets you this:
...得到你这个：
<!DOCTYPE html>
<html>
<body>
<div id="foo">I am a foo div!
</div>
</body>
</html>
I doesn't seem to be very sophisticated but for what I'm after -- the ability to actually debug the HTML my views produce -- it's just fine.
我似乎不是很复杂，但对于我所追求的——实际调试我的视图生成的 HTML 的能力——这很好。
回答by alarive
In express 4.x, add this to your app.js:
在 express 4.x 中，将此添加到您的 app.js 中：
if (app.get('env') === 'development') {
app.locals.pretty = true;
}
回答by Tom Sarduy
If you are using the console to compile, then you can use something like this:
如果您使用控制台进行编译，那么您可以使用以下内容：
$ jade views/ --out html --pretty
回答by petkovic43
In express 4.x, add this to your app.js:
在 express 4.x 中，将此添加到您的 app.js 中：
app.locals.pretty = app.get('env') === 'development';
回答by Oscar Kilhed
Do you really need nicely formatted html? Even if you try to output something that looks nice in one editor, it can look weird in another. Granted, I don't know what you need the html for, but I'd try using the chrome development tools or firebug for Firefox. Those tools give you a good view of the DOM instead of the html.
你真的需要格式很好的 html 吗？即使您尝试在一个编辑器中输出看起来不错的内容，在另一个编辑器中看起来也很奇怪。当然，我不知道你需要 html 做什么，但我会尝试使用 chrome 开发工具或 firebug for Firefox。这些工具可以让您更好地查看 DOM 而不是 html。
If you really-really need nicely formatted html then try using EJS instead of jade. That would mean you'd have to format the html yourself though.
如果您真的需要格式良好的 html，请尝试使用 EJS 而不是 jade。这意味着您必须自己格式化 html。
回答by oliver
you can use tidy
你可以使用整洁
take for example this jade file:
以这个玉文件为例：
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
now you can process it with node testjade.js foo.jade > output.html:
现在您可以使用节点 testjade.js foo.jade > output.html处理它：
testjade.js
testjade.js
var jade = require('jade');
var jadeFile = process.argv[2];
jade.renderFile(__dirname + '/' + jadeFile, options, function(err, html){
console.log(html);
});
will give you s.th. like:
会给你一些 喜欢：
output.html
输出.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
then running it through tidy with tidy -m output.htmlwill result in:
然后使用tidy -m output.html通过 tidy 运行它会导致：
output.html
输出.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>
回答by ebaum
building off of oliver's suggestion, heres a quick and dirty way to view beautified html
根据奥利弗的建议，这是一种查看美化 html 的快速而肮脏的方式
1) download tidy
1）下载整齐
2) add this to your .bashrc
2) 将此添加到您的 .bashrc
function tidyme() {
curl | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
}
3) run
3）运行
$ tidyme localhost:3000/path
the open command only works on macs. hope that helps!
open 命令仅适用于 mac。希望有帮助！
