При использовании 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, который вы используете в поле «сценарий» package.json и выполняете для запуска.
Express 3 изменил это, потому что:
Параметр «параметры просмотра» больше не нужен, app.locals — это локальные переменные, объединенные с res.render(), поэтому [app.locals.pretty = true — это то же самое, что и передача res.render(view, { довольно : истинный }).
promise, uglify-js, css и lexical-scope, прежде чем он снова запустится (он собирался, но вылетал при первом запросе). Я добавил только одну строчку.
- person CWSpear; 22.10.2013
app.locals.pretty = true
- person Huei Tan; 25.05.2014
Чтобы «красиво отформатировать» вывод html в Jade/Express:
app.set('view options', { pretty: true });
В самом 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, создаваемый моими представлениями - это просто отлично.
В экспресс 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:'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 с помощью 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>
Основываясь на предложении Оливера, вот быстрый и грязный способ просмотра украшенного 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. надеюсь, это поможет!
В экспресс 4.x добавьте это в свой app.js:
app.locals.pretty = app.get('env') === 'development';
