Como posso obter o Express para gerar HTML bem formatado?

165

Ao usar o Express for Node.js, notei que ele gera o código HTML sem nenhum caractere de nova linha ou tabulação. Embora possa ser mais eficiente fazer o download, não é muito legível durante o desenvolvimento.

node.js express pug pretty-print Stephen
fonte

313

No seu principal app.jsou no que está em seu 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 });
});

Coloquei a impressão bonita developmentporque você vai querer mais eficiência com o 'feio' production. Certifique-se de definir a variável de ambiente NODE_ENV=productionao implantar na produção. Isso pode ser feito com um shscript que você usa no campo 'script' package.jsone é executado para iniciar.

O Express 3 mudou isso porque:

A configuração "view options" não é mais necessária, app.locals são as variáveis locais mescladas com res.render (), portanto [app.locals.pretty = true é o mesmo que passar res.render (view, {pretty : verdade }).

EhevuTov
fonte

1

Altere a resposta aceita, pois é a resposta certa até o momento.

Val

Isso funcionou, mas eu tive que instalar um monte de dependências extra, ou seja promise, uglify-js, csse lexical-scopeantes que ele iria correr novamente (que iria construir, mas falha na primeira solicitação). Eu apenas adicionei essa linha.

CWSpear

2

Como fazer isso no Express 4.x?

Antonio Salvati

3

@AntonioSalvati tryapp.locals.pretty = true

Huei Tan

1

Esta é uma resposta incrível, exatamente o que eu estava procurando. É interessante ver como isso é feito para diferentes versões do Express. Pesquisei outros problemas e encontrei respostas que não mencionavam a versão do Express.

SnowInferno

50

Para "html de formato bonito" no Jade / Express:

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

Jonathan Julian
fonte

3

Ótima solução! Eu gostaria que também correspondesse aos níveis de recuo entre o layout / página.

Stephen

34

Desatualizado. O Express 3 funciona um pouco diferente, veja o post escrito por EhevuTov.

7

No Express 4.x, adicione isso ao seu app.js:

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

alarmante
fonte

Trabalhou aqui - obrigado! No meu caso, eu não tinha o conjunto 'env' var. Você pode adicioná-lo ao arquivo .js principal com esta linha: process.env.NODE_ENV = 'development';

Gene Bo

Por que você está dando essa resposta se outras respostas já estão dando essa solução?

Nbro 18/11/2015

Eu fui o primeiro a dar essa resposta, a outra resposta foi atualizada posteriormente.

Alarmante 18/11/2015

6

Existe uma opção "bonita" no próprio 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() );

... você recebe isso:

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

Eu não pareço ser muito sofisticado, mas pelo que estou procurando - a capacidade de realmente depurar o HTML que minhas exibições produzem - tudo bem.

Kevin Frost
fonte

3

Se a depuração de HTML é tudo o que você procura, sempre pode 'inspecionar' o HTML usando o Webkit ou o Firebug. Isso sempre gera uma árvore DOM perfeitamente formatada.

Roshambo

@Roshambo verdade, mas a navegação através da árvore é demorado, quando u pode apenas digitalizar a fonte mais rápida (às vezes)

Val

4

Se você estiver usando o console para compilar, poderá usar algo como isto:

$ jade views/ --out html --pretty

Tom Sarduy
fonte

0

Você realmente precisa de html bem formatado? Mesmo se você tentar produzir algo que pareça agradável em um editor, pode parecer estranho em outro. É verdade que não sei para que você precisa do html, mas tentaria usar as ferramentas de desenvolvimento do Chrome ou o firebug para o Firefox. Essas ferramentas oferecem uma boa visão do DOM em vez do html.

Se você realmente precisa de html bem formatado, tente usar o EJS em vez do jade. Isso significaria que você teria que formatar o html por conta própria.

Oscar Kilhed
fonte

Eu gosto mais do ejs agora que trabalhei com ele por um tempo. Eu acho que sou muito particular sobre algumas coisas.

Stephen

0

você pode usar arrumado

tome por exemplo este arquivo 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

agora você pode processá-lo com o nó 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);
});

vai te dar s.th. gostar:

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

executando-o de forma organizada com tidy -m output.html resultará em:

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

partindo da sugestão de oliver, aqui está uma maneira rápida e suja de visualizar html embelezado

1) baixar arrumado

2) adicione isso ao seu .bashrc

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

3) correr

$ tidyme localhost:3000/path

o comando aberto funciona apenas em macs. espero que ajude!

ebaum
fonte

não sabia sobre a opção de recuo ... legal! Eu estava usando o vim's construído em formador.

Oliver

0

No Express 4.x, adicione isso ao seu app.js:

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

petkovic43
fonte

Como posso obter o Express para gerar HTML bem formatado?

Respostas: