При использовании Express для Node.js я заметил, что он выводит HTML-код без символов новой строки или вкладок. Хотя он может быть более эффективным для загрузки, он не очень читается во время разработки.
Как я могу получить Express для вывода хорошо отформатированного 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 при развертывании в процессе производства. Это можно сделать с помощью sh script, который вы используете в поле "script" package.json и запускается для запуска.
Экспресс 3 изменил, потому что:
Параметр "Параметры просмотра" больше не нужен, app.locals - это локальные переменные, объединенные с res.render(), поэтому [app.locals.pretty = true совпадает с передачей res.render(view, {pretty: true}).
В "довольно-форматированный" вывод html в Jade/Express:
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, который производит мои представления - это просто отлично.
В express 4.x добавьте это в свой app.js:
if (app.get('env') === 'development') {
app.locals.pretty = true;
}
Если вы используете консоль для компиляции, вы можете использовать что-то вроде этого:
$ jade views/ --out html --pretty
Вам действительно нужен красиво отформатированный html? Даже если вы попытаетесь вывести что-то, что хорошо выглядит в одном редакторе, оно может выглядеть странно в другом. Конечно, я не знаю, для чего нужен html, но я бы попытался использовать инструменты разработки Chrome или firebug для Firefox. Эти инструменты дают вам хорошее представление о DOM вместо html.
Если вам действительно нужен действительно отформатированный html, попробуйте использовать EJS вместо jade. Это означало бы, что вам придется форматировать html самостоятельно.
вы можете использовать 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:'[email protected]'}, {name:'Bar',email:'[email protected]'}]
- 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);
});
даст вам 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>[email protected]</td></tr><tr><td>Bar</td><td>[email protected]</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>[email protected]</td>
</tr>
<tr>
<td>Bar</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
построение предложения оливки, heres быстрый и грязный способ просмотра украшенного 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 работает только с маками. надеюсь, что это поможет!
В express 4.x добавьте это в свой app.js:
app.locals.pretty = app.get('env') === 'development';