如何让 Express 输出格式良好的 HTML？

在使用 Express for Node.js 时，我注意到它输出的 HTML 代码没有任何换行符或制表符。虽然下载起来可能更有效率，但是在开发过程中它的可读性不是很好。

如何让 Express 输出格式良好的 HTML？

59430 次浏览
小开

您真的需要格式良好的 html 吗？即使您尝试在一个编辑器中输出看起来不错的内容，在另一个编辑器中也可能看起来很奇怪。当然，我不知道你需要 html 做什么，但我会尝试使用 Chrome 开发工具或 Firefox 的 Firebug。这些工具为您提供了一个很好的 DOM 视图，而不是 html。

如果你真的-真的需要很好的格式化 html，那么尝试使用 EJS 而不是翡翠。这意味着您必须自己格式化 html。

小开

你可以使用 干净利落

以这个玉文件为例:

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);
});

会给你某种东西，比如:

输出

<!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

然后使用 资料输出将它整齐地运行，结果是:

输出

<!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>
小开

建立在奥利弗的建议，这里有一个快速和肮脏的方式来查看美化超文本标记语言

1)下载 干净利落

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 上运行，希望能有帮助！

小开

到 Jade/Express 中的“ pretty-format”html 输出:

app.set('view options', { pretty: true });
小开

杰德本身也有一个“漂亮”的选择:

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 的能力——这很好。

小开
最佳答案

在你的主要 app.js或什么是在它的地方:

特快4. x

if (app.get('env') === 'development') {
app.locals.pretty = true;
}

特快3. x

app.configure('development', function(){
app.use(express.errorHandler());
app.locals.pretty = true;
});

特快2. x

app.configure('development', function(){
app.use(express.errorHandler());
app.set('view options', { pretty: true });
});

我把美丽的打印在 development，因为你会想要更多的效率与’丑陋’在 production。在部署到生产环境时，确保将环境变量设置为 NODE_ENV=production。这可以通过在 package.json的“ script”字段中使用的 sh脚本来完成，并在启动时执行。

这是因为:

不再需要“视图选项”设置，app.local 是与 res.render ()合并的本地变量，所以[ app.locals.pretty = true 与传递 res.render (view，{ pretty: true })相同。

小开

在 Express 4.x 中，将下面的代码添加到 app.js 中:

if (app.get('env') === 'development') {
app.locals.pretty = true;
}
小开

如果您使用控制台进行编译，那么您可以使用如下代码:

$ jade views/ --out html --pretty
小开

在 Express 4.x 中，将下面的代码添加到 app.js 中:

app.locals.pretty = app.get('env') === 'development';

提交答案