node.js - studio - node js ejemplos
¿Cómo puedo obtener Express para producir un buen formato de HTML? (9)
¿Realmente necesitas html con buen formato? Incluso si intentas producir algo que se vea bien en un editor, puede parecer extraño en otro. De acuerdo, no sé para qué necesitas 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 necesitas un html bien formateado, prueba usar EJS en lugar de jade. Sin embargo, eso significa que tendrías que formatear el html.
Cuando uso Express for Node.js, noté que genera el código HTML sin caracteres o pestañas de nueva línea. Aunque puede ser más eficiente para descargar, no es muy legible durante el desarrollo.
¿Cómo puedo obtener Express para producir un buen formato de HTML?
En express 4.x, agrégalo a tu app.js:
app.locals.pretty = app.get(''env'') === ''development'';
En express 4.x, agrégalo a tu app.js:
if (app.get(''env'') === ''development'') {
app.locals.pretty = true;
}
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 consigue esto:
<!DOCTYPE html>
<html>
<body>
<div id="foo">I am a foo div!
</div>
</body>
</html>
No parece ser muy sofisticado, pero por lo que busco: la capacidad de depurar realmente el HTML que producen mis vistas, está bien.
Para "formato bonito" salida html en Jade / Express:
app.set(''view options'', { pretty: true });
Si está utilizando la consola para compilar, puede usar algo como esto:
$ jade views/ --out html --pretty
basándose en la sugerencia de Oliver, aquí está una manera rápida y sucia de ver html embellecido
1) descargar tidy
2) agregue esto a su .bashrc
function tidyme() {
curl $1 | tidy -indent -quiet -output tidy.html ; open -a ''google chrome'' tidy.html
}
3) ejecutar
$ tidyme localhost:3000/path
el comando abrir solo funciona en Mac. ¡Espero que ayude!
puedes usar tidy
tomar por ejemplo este archivo de 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);
});
le dará a usted 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="/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 ordenado con tidy -m output.html resultará en:
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 tu app.js principal o 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 bonita impresión en development porque querrás más eficiencia con la production ''fea''. Asegúrese de establecer la variable de entorno NODE_ENV=production cuando despliega en producción. Esto se puede hacer con un script sh que se utiliza en el campo ''script'' de package.json y se ejecuta para comenzar.
Express 3 changed esto porque:
La configuración "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 }).