Lors de l'utilisation d'Express pour Node.js, j'ai remarqué qu'il génère le code HTML sans aucun caractère de nouvelle ligne ni tabulation. Bien qu'il puisse être plus efficace à télécharger, il n'est pas très lisible pendant le développement.
Comment puis-je faire en sorte qu'Express produise un HTML bien formaté?
Réponses:
Dans votre main app.jsou ce qui est à sa place:
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 });
});
J'ai mis la jolie impression developmentparce que vous voudrez plus d'efficacité avec le `` laid '' production. Assurez-vous de définir la variable d'environnement NODE_ENV=productionlorsque vous déployez en production. Cela peut être fait avec un shscript que vous utilisez dans le champ «script» de package.jsonet exécuté pour démarrer.
Express 3 a changé cela parce que:
Le paramètre «options d'affichage» n'est plus nécessaire, app.locals sont les variables locales fusionnées avec celles de res.render (), donc [app.locals.pretty = true équivaut à transmettre res.render (view, {pretty : vrai }).
promise, uglify-js, csset lexical-scopeavant qu'elle ne se présenterait à nouveau (il construire, mais accident sur demande en premier). J'ai seulement ajouté cette ligne.
app.locals.pretty = true
Pour une sortie HTML "joli format" dans Jade / Express:
app.set('view options', { pretty: true });Dans express 4.x, ajoutez ceci à votre app.js:
if (app.get('env') === 'development') {
app.locals.pretty = true;
}
Il existe une option "jolie" dans Jade lui-même:
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() );
... vous obtient ceci:
<!DOCTYPE html>
<html>
<body>
<div id="foo">I am a foo div!
</div>
</body>
</html>
Je ne semble pas être très sophistiqué, mais pour ce que je recherche - la possibilité de déboguer le HTML produit par mes vues - c'est très bien.
Si vous utilisez la console pour compiler, vous pouvez utiliser quelque chose comme ceci:
$ jade views/ --out html --prettyAvez-vous vraiment besoin de HTML bien formaté? Même si vous essayez de produire quelque chose qui a l'air bien dans un éditeur, cela peut sembler étrange dans un autre. Certes, je ne sais pas pourquoi vous avez besoin du code HTML, mais j'essaierais d'utiliser les outils de développement Chrome ou Firebug pour Firefox. Ces outils vous donnent une bonne vue du DOM au lieu du html.
Si vous avez vraiment besoin d'un html bien formaté, essayez d'utiliser EJS au lieu de jade. Cela voudrait dire que vous devrez formater le html vous-même.
vous pouvez utiliser tidy
prenez par exemple ce fichier 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.email
maintenant vous pouvez le traiter avec le nœud 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);
});
vous donnera s.th. comme:
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></htmlpuis l'exécuter via tidy avec tidy -m output.html entraînera:
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>
en s'appuyant sur la suggestion d'oliver, voici un moyen rapide et sale de voir le html embelli
1) télécharger tidy
2) ajoutez ceci à votre .bashrc
function tidyme() {
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
}
3) courir
$ tidyme localhost:3000/pathla commande open ne fonctionne que sur les macs. J'espère que cela pourra aider!
Dans express 4.x, ajoutez ceci à votre app.js:
app.locals.pretty = app.get('env') === 'development';