Bei der Verwendung von Express für Node.js habe ich festgestellt, dass der HTML-Code ohne Zeilenumbruchzeichen oder Tabulatoren ausgegeben wird. Obwohl das Herunterladen möglicherweise effizienter ist, ist es während der Entwicklung nicht sehr gut lesbar.
Wie kann ich Express dazu bringen, gut formatiertes HTML auszugeben?
Antworten:
In Ihrer Haupt- app.jsoder was ist an seiner Stelle:
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 });
});Ich habe den hübschen Druck eingefügt, developmentweil Sie mit dem 'hässlichen' mehr Effizienz erzielen möchten production. Stellen Sie sicher, dass Sie die Umgebungsvariable festlegen, NODE_ENV=productionwenn Sie in der Produktion bereitstellen. Dies kann mit einem shSkript erfolgen, das Sie im Feld 'Skript' von verwenden package.jsonund zum Starten ausführen.
Express 3 hat dies geändert, weil:
Die Einstellung "Ansichtsoptionen" ist nicht mehr erforderlich. App.locals sind die lokalen Variablen, die mit res.render () zusammengeführt werden. [App.locals.pretty = true ist also dasselbe wie das Übergeben von res.render (view, {pretty : wahr }).
promise, uglify-js, cssund lexical-scopebevor es wieder laufen würde (es wäre zu bauen, aber Absturz auf erster Anfrage). Ich habe nur diese eine Zeile hinzugefügt.
app.locals.pretty = true
Zur "hübschen Formatierung" der HTML-Ausgabe in Jade / Express:
app.set('view options', { pretty: true });Fügen Sie dies in Express 4.x zu Ihrer app.js hinzu:
if (app.get('env') === 'development') {
app.locals.pretty = true;
}In Jade selbst gibt es eine "hübsche" Option:
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() );... bringt dir das:
<!DOCTYPE html>
<html>
<body>
<div id="foo">I am a foo div!
</div>
</body>
</html>Ich scheine nicht sehr raffiniert zu sein, aber für das, was ich suche - die Fähigkeit, den von meinen Ansichten erzeugten HTML-Code tatsächlich zu debuggen - ist das in Ordnung.
Wenn Sie die Konsole zum Kompilieren verwenden, können Sie Folgendes verwenden:
$ jade views/ --out html --prettyBenötigen Sie wirklich gut formatiertes HTML? Selbst wenn Sie versuchen, etwas auszugeben, das in einem Editor gut aussieht, kann es in einem anderen Editor seltsam aussehen. Zugegeben, ich weiß nicht, wofür Sie HTML benötigen, aber ich würde versuchen, die Chrome-Entwicklungstools oder den Firebug für Firefox zu verwenden. Mit diesen Tools erhalten Sie eine gute Ansicht des DOM anstelle des HTML-Codes.
Wenn Sie wirklich gut formatiertes HTML benötigen, verwenden Sie EJS anstelle von Jade. Das würde bedeuten, dass Sie das HTML selbst formatieren müssten.
Sie können ordentlich verwenden
Nehmen Sie zum Beispiel diese Jade-Datei:
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.emailJetzt können Sie es mit dem Knoten testjade.js foo.jade> output.html verarbeiten :
testjade.js
var jade = require('jade');
var jadeFile = process.argv[2];
jade.renderFile(__dirname + '/' + jadeFile, options, function(err, html){
console.log(html);
});wird dir s.th. mögen:
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></htmlWenn Sie es dann mit tidy -m output.html durch tidy laufen lassen, erhalten Sie :
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>Aufbauend auf Olivers Vorschlag ist hier eine schnelle und schmutzige Möglichkeit, verschönertes HTML anzuzeigen
1) ordentlich herunterladen
2) Fügen Sie dies Ihrer .bashrc hinzu
function tidyme() {
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
}3) laufen
$ tidyme localhost:3000/pathDer Befehl open funktioniert nur auf Macs. hoffentlich hilft das!
Fügen Sie dies in Express 4.x zu Ihrer app.js hinzu:
app.locals.pretty = app.get('env') === 'development';