web-dev-qa-db-fra.com

Comment puis-je obtenir qu'Express produise du HTML bien formaté?

Lors de l'utilisation de Express for Node.js, j'ai remarqué qu'il génère le code HTML sans aucun caractère de nouvelle ligne ni aucun onglet. Bien que le téléchargement soit plus efficace, il n’est pas très lisible pendant le développement.

Comment puis-je obtenir qu'Express produise du HTML bien formaté?

node.jsexpresspugpretty-print
164
Stephen

Dans votre principale app.js ou 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 });
});

Je mets la jolie impression dans development parce que vous voudrez plus d'efficacité avec le "laid" dans production. Assurez-vous de définir la variable d'environnement NODE_ENV=production lorsque vous vous déployez en production. Cela peut être fait avec un script sh que vous utilisez dans le champ 'script' de package.json et exécuté pour commencer.

Express 3 modifié ceci parce que:

Le paramètre "options de visualisation" n’est plus nécessaire, app.locals étant les variables locales fusionnées avec celles de res.render (), donc [app.locals.pretty = true équivaut à transmettre res.render (view, {pretty : vrai }).

311
EhevuTov

Pour "joliment formaté" la sortie HTML dans Jade/Express:

app.set('view options', { pretty: true });
50
Jonathan Julian

Il y a une "jolie" option dans Jade 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 capacité de déboguer le code HTML généré par mes vues - c'est très bien.

7
Kevin Frost

Dans Express 4.x, ajoutez ceci à votre app.js:

if (app.get('env') === 'development') {
  app.locals.pretty = true;
}
7
alarive

Si vous utilisez la console pour compiler, vous pouvez utiliser quelque chose comme ceci:

$ jade views/ --out html --pretty
4
Tom Sarduy

en s'appuyant sur la suggestion d'Oliver, voici un moyen rapide et sale de visualiser le HTML embelli

1) télécharger bien rangé

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/path

la commande open ne fonctionne que sur macs. J'espère que ça t'as aidé!

0
ebaum

Dans Express 4.x, ajoutez ceci à votre app.js:

app.locals.pretty = app.get('env') === 'development';
0
petkovic43

Avez-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 paraître bizarre dans un autre. Certes, je ne sais pas pourquoi vous avez besoin du code HTML, mais j’essayerais d’utiliser les outils de développement chrome ou Firebug pour Firefox. Ces outils vous donnent une bonne vue du DOM au lieu de le html.

Si vous avez vraiment vraiment besoin d'un HTML bien formaté, essayez d'utiliser EJS au lieu de jade. Cela voudrait dire que vous devrez toutefois formater le code HTML vous-même.

0
Oscar Kilhed

vous pouvez utiliser ranger

prenons 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 noeud 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);
});

je vous donnerai 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="/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

puis exécutez-le avec bien rangé avec bien rangé -m sortie.html aura pour résultat:

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>
0
oliver