Odpowiedzi:
W twoim głównym app.jslub na swoim miejscu:
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 });
});
Włożyłem ładny wydruk, developmentponieważ będziesz chciał większej wydajności z „brzydkim” production. Pamiętaj, aby ustawić zmienną środowiskową NODE_ENV=productionpodczas wdrażania w środowisku produkcyjnym. Można to zrobić za pomocą shskryptu, którego używasz w polu „skrypt” programu package.jsoni uruchamiasz go, aby rozpocząć.
Express 3 zmienił to, ponieważ:
Ustawienie "opcje widoku" nie jest już potrzebne, app.locals to zmienne lokalne scalone z res.render (), więc [app.locals.pretty = true jest tym samym, co przekazanie res.render (view, {pretty : prawdziwe }).
promise, uglify-js, cssi lexical-scopezanim będzie go uruchomić ponownie (to będzie budować, ale krach na pierwsze żądanie). Dodałem tylko jedną linię.
app.locals.pretty = true
Aby wyświetlić dane wyjściowe HTML w „ładnym formacie” w Jade / Express:
app.set('view options', { pretty: true });W express 4.x dodaj to do swojego app.js:
if (app.get('env') === 'development') {
app.locals.pretty = true;
}W samym Jade istnieje opcja „ładna”:
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() );... dostajesz to:
<!DOCTYPE html>
<html>
<body>
<div id="foo">I am a foo div!
</div>
</body>
</html>Nie wydaje mi się, żebym był zbyt wyrafinowany, ale ze względu na to, czego szukam - możliwość debugowania kodu HTML, który generują moje widoki - jest w porządku.
Jeśli używasz konsoli do kompilacji, możesz użyć czegoś takiego:
$ jade views/ --out html --prettyCzy naprawdę potrzebujesz ładnie sformatowanego html? Nawet jeśli spróbujesz wydrukować coś, co wygląda ładnie w jednym edytorze, może to wyglądać dziwnie w innym. To prawda, nie wiem, do czego potrzebujesz html, ale spróbuję użyć narzędzi programistycznych Chrome lub firebuga dla Firefoksa. Te narzędzia dają dobry widok na DOM zamiast HTML.
Jeśli naprawdę potrzebujesz ładnie sformatowanego kodu HTML, spróbuj użyć EJS zamiast jade. Oznaczałoby to jednak, że musiałbyś samodzielnie sformatować kod HTML.
możesz użyć schludnego
Weźmy na przykład ten plik jade:
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.emailteraz możesz to przetworzyć za pomocą węzła 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);
});da ci s.th. lubić:
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></htmlnastępnie uruchomienie go przez tidy z tidy -m output.html spowoduje:
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>Opierając się na sugestii Olivera, oto szybki i brudny sposób na wyświetlenie upiększonego html
1) pobierz schludnie
2) dodaj to do swojego .bashrc
function tidyme() {
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
}3) biegać
$ tidyme localhost:3000/pathpolecenie open działa tylko na komputerach Mac. mam nadzieję, że to pomoże!
W express 4.x dodaj to do swojego app.js:
app.locals.pretty = app.get('env') === 'development';