Come posso ottenere Express per l'output di HTML ben formattato?

165

Quando si utilizza Express per Node.js, ho notato che genera il codice HTML senza caratteri di nuova riga o schede. Sebbene possa essere più efficiente da scaricare, non è molto leggibile durante lo sviluppo.

— Stefano
fonte

313

Nel tuo principale app.jso in ciò che è al suo posto:

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

Ho messo la bella stampa developmentperché vorrai più efficienza con il 'brutto' in production. Assicurarsi di impostare la variabile di ambiente NODE_ENV=productiondurante la distribuzione in produzione. Questo può essere fatto con uno shscript che usi nel campo "script" package.jsoned eseguito per iniziare.

Express 3 ha cambiato questo perché:

L'impostazione "opzioni di visualizzazione" non è più necessaria, app.locals sono le variabili locali unite a res.render (), quindi [app.locals.pretty = true equivale a passare res.render (view, {pretty : vero }).

— EhevuTov
fonte

1

Si prega di cambiare la risposta accettata a questo in quanto è la risposta giusta fino ad oggi.

— Val

Questo ha funzionato, ma ho dovuto installare un gruppo di dipendenze in più, vale a dire promise, uglify-js, csse lexical-scopeprima che si correrebbe di nuovo (sarebbe costruire, ma incidente a prima richiesta). Ho aggiunto solo una riga.

— CWSpear

2

Come farlo in Express 4.x?

— Antonio Salvati,

3

@AntonioSalvati tryapp.locals.pretty = true

— Huei Tan

1

Questa è una risposta fantastica, esattamente quello che stavo cercando. È rinfrescante vedere come viene fatto per le diverse versioni di Express. Ho cercato altri problemi e ho trovato risposte che non menzionavano per quale versione di Express fosse.

— SnowInferno,

50

Per "html di formato piuttosto" in Jade / Express:

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

— Jonathan Julian
fonte

3

Ottima soluzione! Vorrei che corrispondesse anche ai livelli di rientro tra layout / pagina.

— Stephen,

34

Obsoleto. Express 3 funziona in modo leggermente diverso, vedi il post scritto da EhevuTov.

7

In Express 4.x, aggiungi questo al tuo app.js:

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

— alarive
fonte

Ha lavorato qui - grazie! Nel mio caso non avevo il set var 'env'. Puoi aggiungerlo al file .js principale con questa riga: process.env.NODE_ENV = 'development';

— Gene Bo,

Perché stai dando questa risposta se altre risposte stanno già dando questa soluzione?

— nbro,

Sono stato il primo a dare questa risposta, l'altra risposta è stata successivamente aggiornata.

— alarive il

6

C'è un'opzione "carina" nella stessa Jade:

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() );

... ti dà questo:

<!DOCTYPE html>
<html>
  <body>
    <div id="foo">I am a foo div!
    </div>
  </body>
</html>

Non mi sembra molto sofisticato, ma per quello che sto cercando - la possibilità di eseguire il debug dell'HTML che le mie visualizzazioni producono - va bene.

— Kevin Frost
fonte

3

Se il debug dell'HTML è tutto ciò che cerchi, puoi sempre "ispezionare" l'HTML usando Webkit o la finestra di ispezione Firebug. Ciò genera sempre un albero DOM perfettamente formattato.

— Roshambo,

@Roshambo vero, ma navigare attraverso l'albero richiede molto tempo, quando puoi semplicemente scansionare la fonte più velocemente (a volte)

— Val

4

Se stai usando la console per compilare, puoi usare qualcosa del genere:

$ jade views/ --out html --pretty

— Tom Sarduy
fonte

0

Hai davvero bisogno di un html ben formattato? Anche se provi a produrre qualcosa che sembra bello in un editor, può sembrare strano in un altro. Certo, non so a cosa ti serva l'html, ma proverei a usare gli strumenti di sviluppo di Chrome o Firebug per Firefox. Questi strumenti offrono una buona visione del DOM anziché dell'html.

Se hai davvero bisogno di un html ben formattato, prova a usare EJS invece di jade. Ciò significherebbe che dovresti formattare tu stesso l'html.

— Oscar Kilhed
fonte

Mi piacciono gli ejs ora che ci ho lavorato per un po '. Immagino di essere molto particolare su alcune cose.

— Stephen,

0

puoi usare ordinato

prendiamo ad esempio questo file di giada:

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

ora puoi elaborarlo con il nodo 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);
});

ti darà il s.th. piace:

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

quindi eseguendolo in ordine con tidy -m output.html si otterrà:

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>

— oliver
fonte

0

basandosi sul suggerimento di Oliver, ecco un modo rapido e sporco per visualizzare HTML abbellito

1) scarica in ordine

2) aggiungi questo al tuo .bashrc

function tidyme() {
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
}

3) corri

$ tidyme localhost:3000/path

il comando open funziona solo su Mac. spero che aiuti!

— ebaum
fonte

non sapevo dell'opzione di rientro ... bello! Stavo usando il formater integrato di Vim.

— Oliver,

0

In Express 4.x, aggiungi questo al tuo app.js:

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

— petkovic43
fonte