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

Question

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

node.jsexpresspugpretty-print

169

在使用Node.js的Express时，我发现它会输出不带任何换行符或制表符的HTML代码。虽然这可能更有效率下载，但在开发过程中不太易读。

我怎样才能让Express输出格式良好的HTML呢？

- Stephen

9个回答

51

在Jade/Express中，“美化格式”HTML输出：

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

- Jonathan Julian

3

好的解决方案！我希望它也能够匹配布局/页面之间的缩进级别。 - Stephen

35

过时了。Express 3 的运行方式有点不同，请查看 EhevuTov 写的帖子。 - user673046

7

在Jade本身中有一个“pretty”选项，它可以使内容更加易读：

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——它就足够了。

- Kevin Frost

3

如果你只是想调试HTML代码，你可以使用Webkit或Firebug检查器来“检查”HTML代码。这样总能生成一个格式完美的DOM树。 - Roshambo

@Roshambo 是的，但是遍历整个树结构需要花费很长时间，有时候你可以更快地扫描源代码。 - Val

7

在 Express 4.x 中，将以下内容添加到您的 app.js 文件中：

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

- alarive

在这里工作-谢谢！在我的情况下，我没有设置'env'变量。您可以通过以下一行将其添加到主要的.js文件中：process.env.NODE_ENV = 'development'; - Gene Bo

如果其他答案已经给出了解决方案，为什么你还要给出这个答案呢？ - nbro

我是第一个给出这个答案的，另一个答案是后来更新的。 - alarive

4

如果您正在使用控制台进行编译，则可以使用以下命令：

$ jade views/ --out html --pretty

- Tomas Ramirez Sarduy

1

在 Express 4.x 中，在 app.js 文件中添加以下内容：

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

- petkovic43

0

在 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 上有效。希望这能帮到你！

- user426957

不知道有缩进选项...太好了！我一直在使用vim内置的格式化工具。 - oliver

0

你可以使用tidy。

以这个jade文件为例：

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 运行它，将会得到以下结果：

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>

- oliver

0

你真的需要格式良好的HTML吗？即使您尝试在一个编辑器中输出看起来很好的东西，它在另一个编辑器中可能会看起来很奇怪。我不知道您需要HTML做什么，但我建议您尝试使用Chrome开发工具或Firefox的Firebug。这些工具可以让您查看DOM而不是HTML。

如果您确实需要格式良好的HTML，请尝试使用EJS而不是Jade。这意味着您需要自己格式化HTML。

- Oscar Kilhed

现在我用了一段时间，我更喜欢ejs。我想我只是对某些事情非常挑剔。 - Stephen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- EhevuTov · Accepted Answer

在你的主文件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 });
});

我将漂亮打印放在 开发 中，因为您在 生产 中希望更高的效率。确保在部署到生产环境时设置环境变量NODE_ENV = production。这可以通过在package.json的“script”字段中使用的sh脚本来完成，并执行以启动。

Express 3对此进行了更改，因为：

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