如何获得Express以输出格式正确的HTML?


165

当使用Express for Node.js时,我注意到它输出的HTML代码没有换行符或制表符。尽管下载可能更有效,但在开发过程中可读性不强。

如何获得Express以输出格式正确的HTML?

Answers:


313

在您的主要位置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因为您希望通过使用“丑陋”来提高效率productionNODE_ENV=production在生产中进行部署时,请确保设置环境变量。这可以通过sh您在的“脚本”字段中使用package.json并执行以开始的脚本来完成。

Express 3 对此进行了更改,因为:

不再需要“视图选项”设置,app.locals是与res.render()合并的局部变量,因此[app.locals.pretty = true与传递res.render(view,{ :true})。


1
请更改已接受的答案,因为这是迄今为止的正确答案。
Val

这个工作,但我必须安装一堆额外的依赖,即promiseuglify-jscsslexical-scope之前它会再次运行(它将建造,但在碰撞第一次请求)。我只添加了那一行。
CWSpear

2
如何在Express 4.x中做到这一点?
Antonio Salvati 2014年

3
@AntonioSalvati试试app.locals.pretty = true
Huei Tan

1
这是一个很棒的答案,正是我想要的。令人耳目一新的看看如何针对不同版本的Express进行此操作。我搜索了其他问题,并找到了未提及Express适用于哪个版本的答案。
SnowInferno 2014年

50

要在Jade / Express中“漂亮格式”的html输出:

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

3
很好的解决方案!我希望它也可以匹配布局/页面之间的缩进级别。
斯蒂芬

34
过时的。Express 3的工作方式略有不同,请参阅EhevuTov撰写的帖子。

7

在express 4.x中,将其添加到您的app.js:

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

在这里工作-谢谢!就我而言,我没有设置“ env” var。您可以使用这一行将其添加到主.js文件中:process.env.NODE_ENV ='development';
基因博

如果已经有其他答案在提供此解决方案,那么为什么要给出此答案呢?
nbro

我是第一个给出此答案的人,其他答案此后进行了更新。
2015年

6

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的功能-很好。


3
如果只需要调试HTML,那么您始终可以使用Webkit或Firebug检查器来“检查” HTML。这总是会生成格式完美的DOM树。
Roshambo 2012年

@Roshambo是的,但是当您可以更快地扫描源(有时)时,在树中导航非常耗时
Val

4

如果您正在使用控制台进行编译,则可以使用如下代码:

$ jade views/ --out html --pretty

0

您真的需要格式正确的html吗?即使您尝试在一个编辑器中输出看起来不错的东西,在另一个编辑器中也可能看起来很奇怪。当然,我不知道您需要什么html,但是我会尝试使用chrome开发工具或Firefox的萤火虫。这些工具使您可以很好地了解DOM,而不是html。

如果您确实需要格式正确的html,请尝试使用EJS代替玉。那意味着您必须自己格式化html格式。


我已经使用ejs一段时间了,因此我更喜欢ejs。我想我对某些事情非常讲究。
斯蒂芬

0

您可以使用 整理

以这个玉文件为例:

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> 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="https://stackoverflow.com/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>

0

建立在奥利弗的建议的基础上,这是查看美化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命令仅适用于macs。希望有帮助!


不知道缩进选项...不错!我正在使用vim的内置格式化程序。
奥利弗·奥利弗

0

在express 4.x中,将其添加到您的app.js:

app.locals.pretty = app.get('env') === 'development';
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.