Question

使用Express for Node.js时，我注意到它输出的HTML代码没有任何换行符或标签。虽然下载速度可能更高，但在开发过程中它的可读性并不高。

如何让Express输出格式正确的HTML？

Answer 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。这可以使用您在sh的“脚本”字段中使用的package.json脚本来完成，并执行以开始。

快递3 changed这是因为：

不再需要“视图选项”设置，app.locals是与res.render（）合并的局部变量，因此[app.locals.pretty = true与传递res.render（视图）相同，{pretty：true}）。

Answer 2

在Jade / Express中“漂亮地格式化”html输出：

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

Answer 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 - 它很好。

Answer 4

在express 4.x中，将其添加到app.js：

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

Answer 5

如果您使用控制台进行编译，那么您可以使用以下内容：

$ jade views/ --out html --pretty

Answer 6

你真的需要格式良好的HTML吗？即使你试图在一个编辑器中输出看起来不错的东西，它在另一个编辑器中看起来也很奇怪。当然，我不知道你需要什么html，但我会尝试使用chrome开发工具或firebug for Firefox。这些工具可以让您更好地查看DOM而非html。

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

Answer 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

现在您可以使用节点testjade.js foo.jade＆gt;处理它。 output.html ：

<强> testjade.js

var jade = require('jade'); var jadeFile = process.argv[2]; jade.renderFile(__dirname + '/' + jadeFile, options, function(err, html){ console.log(html); });

会给你s.th.像：

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

Answer 8

建立奥利弗的建议，这是一种快速而肮脏的方式来查看美化的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。希望有所帮助！

Answer 9

在express 4.x中，将其添加到app.js：

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

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

9 个答案: