¿Cómo puedo hacer que Express emita HTML bien formateado?

165

Al usar Express para Node.js, noté que genera el código HTML sin caracteres de nueva línea o pestañas. Aunque puede ser más eficiente descargar, no es muy legible durante el desarrollo.

— Stephen
fuente

313

En su principal app.jso lo que está en su lugar:

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

Puse la impresión bonita developmentporque querrás más eficiencia con lo 'feo' production. Asegúrese de establecer la variable de entorno NODE_ENV=productioncuando realice la implementación en producción. Esto puede hacerse con un shscript que use en el campo 'script' package.jsony ejecutado para comenzar.

Express 3 cambió esto porque:

La configuración de "ver opciones" ya no es necesaria, app.locals son las variables locales fusionadas con res.render (), por lo que [app.locals.pretty = true es lo mismo que pasar res.render (view, {pretty : cierto }).

— EhevuTov
fuente

1

Cambie la respuesta aceptada a esto ya que es la respuesta correcta hasta la fecha.

— Val

Esto funcionó, pero tuve que instalar un montón de dependencias adicionales, a saber promise, uglify-js, cssy lexical-scopeantes de que correría de nuevo (que construiría, pero accidente en la primera solicitud). Solo agregué esa línea.

— CWSpear

2

¿Cómo hacer eso en Express 4.x?

— Antonio Salvati

3

@AntonioSalvati pruebaapp.locals.pretty = true

— Huei Tan

1

Esta es una respuesta increíble, exactamente lo que estaba buscando. Es refrescante ver cómo se hace esto para diferentes versiones de Express. Busqué otros problemas y encontré respuestas que no mencionaban para qué versión de Express era.

— SnowInferno

50

Para la salida html de "formato bonito" en Jade / Express:

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

— Jonathan Julian
fuente

3

Gran solución! Desearía que coincidiera también con los niveles de sangría entre diseño / página.

— Stephen

34

Anticuado. Express 3 funciona un poco diferente, vea la publicación escrita por EhevuTov.

7

En express 4.x, agregue esto a su app.js:

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

— alarmante
fuente

Trabajó aquí, ¡gracias! En mi caso, no tenía el conjunto var 'env'. Puede agregarlo al archivo .js principal con esta línea: process.env.NODE_ENV = 'desarrollo';

— Gene Bo

¿Por qué estás dando esta respuesta si otras respuestas ya están dando esta solución?

— nbro

Fui el primero en dar esta respuesta, la otra respuesta se actualizó después.

— alarmante

6

Hay una opción "bonita" en 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() );

... te da esto:

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

No parece ser muy sofisticado, pero para lo que busco, la capacidad de depurar el HTML que producen mis vistas, está bien.

— Kevin Frost
fuente

3

Si lo único que busca es la depuración de HTML, siempre puede "inspeccionar" el HTML utilizando el inspector Webkit o Firebug. Eso siempre genera un árbol DOM perfectamente formateado.

— Roshambo

@Roshambo es cierto, pero navegar a través del árbol lleva mucho tiempo, cuando puedes escanear la fuente más rápido (a veces)

— Val

4

Si está utilizando la consola para compilar, puede usar algo como esto:

$ jade views/ --out html --pretty

— Tom Sarduy
fuente

0

¿Realmente necesitas un HTML bien formateado? Incluso si intenta generar algo que se ve bien en un editor, puede verse extraño en otro. De acuerdo, no sé para qué necesita el html, pero trataría de usar las herramientas de desarrollo de Chrome o Firebug para Firefox. Esas herramientas le dan una buena vista del DOM en lugar del html.

Si realmente necesita HTML bien formateado, intente usar EJS en lugar de jade. Sin embargo, eso significaría que tendría que formatear el html.

— Oscar Kilhed
fuente

Me gustan más los ejs ahora que he trabajado con ellos durante un tiempo. Supongo que soy muy particular sobre algunas cosas.

— Stephen

0

puedes usar ordenado

tome por ejemplo este archivo 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

ahora puede procesarlo con el 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);
});

te dará algo me gusta:

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

luego ejecutarlo en tidy con tidy -m output.html dará como resultado:

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
fuente

0

Partiendo de la sugerencia de Oliver, aquí hay una manera rápida y sucia de ver html embellecido

1) descargar ordenado

2) agregue esto a su .bashrc

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

3) correr

$ tidyme localhost:3000/path

El comando abierto solo funciona en Mac. ¡Espero que ayude!

— ebaum
fuente

no sabía sobre la opción de sangría ... ¡bien! Estaba usando el formateador incorporado de vim.

— oliver

0

En express 4.x, agregue esto a su app.js:

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

— petkovic43
fuente