Під час використання 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' package.jsonта виконали для запуску.
Express 3 змінив це, оскільки:
Налаштування "параметри перегляду" більше не потрібно, app.locals - це локальні змінні, об'єднані з res.render (), тому [app.locals.pretty = true - це те саме, що передає res.render (вид, {досить : правда}).
promise, uglify-js, cssі , lexical-scopeперш ніж він буде працювати знову (це було б побудувати, але аварії на першу вимогу). Я лише додав, що один рядок.
app.locals.pretty = true
Для виведення html-файлів у «досить форматі» в Jade / Express:
app.set('view options', { pretty: true });У виразі 4.x додайте це до свого app.js:
if (app.get('env') === 'development') {
app.locals.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, який виробляють мої погляди - це просто чудово.
Якщо ви використовуєте консоль для компіляції, ви можете використовувати щось подібне:
$ jade views/ --out html --prettyВам справді потрібен добре відформатований html? Навіть якщо ви спробуєте вивести щось, що виглядає добре в одному редакторі, це може виглядати дивно в іншому. Зрозуміло, я не знаю, для чого вам потрібен HTML, але я б спробував використовувати інструменти для розробки хрому або firebug для Firefox. Ці інструменти дають вам хороший огляд DOM замість html.
Якщо вам дуже потрібен гарний формат HTML, то спробуйте використовувати EJS замість нефриту. Це означає, що вам доведеться самостійно відформатувати HTML.
ви можете використовувати акуратно
візьмемо для прикладу цей нефритовий файл:
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 призведе до:
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) скачати охайно
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';