Yanıtlar:
Ana bölgenizde app.jsveya yerinde ne var:
Hızlı 4.x
if (app.get('env') === 'development') {
app.locals.pretty = true;
}Hızlı 3.x
app.configure('development', function(){
app.use(express.errorHandler());
app.locals.pretty = true;
});Hızlı 2.x
app.configure('development', function(){
app.use(express.errorHandler());
app.set('view options', { pretty: true });
});Güzel baskıyı koydum developmentçünkü 'çirkin' ile daha fazla verimlilik isteyeceksiniz production. NODE_ENV=productionÜretimde dağıtım yaparken ortam değişkenini ayarladığınızdan emin olun . Bu işlem sh, 'komut dosyası' alanında kullandığınız bir komut dosyasıyla yapılabilir package.jsonve başlamak için yürütülür.
Express 3 bunu değiştirdi çünkü:
"Görünüm seçenekleri" ayarı artık gerekli değildir, app.locals res.render () ile birleştirilen yerel değişkenlerdir, bu nedenle [app.locals.pretty = true, res.render (view, {pretty, : doğru }).
promise, uglify-js, cssve lexical-scope(ilk istek üzerine bu kuracağına, ama kilitlenme) tekrar aday olacağını daha önce. Sadece bir satır ekledim.
app.locals.pretty = true
Jade / Express'te html çıktısını "güzel biçimlendirmek" için:
app.set('view options', { pretty: true });Express 4.x'te bunu app.js'nize ekleyin:
if (app.get('env') === 'development') {
app.locals.pretty = true;
}Jade'in kendisinde "güzel" bir seçenek var:
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() );... sana bunu getirir:
<!DOCTYPE html>
<html>
<body>
<div id="foo">I am a foo div!
</div>
</body>
</html>Çok sofistike görünmüyorum ama ne olduğum için - görünümlerimin ürettiği HTML'de hata ayıklama yeteneği - gayet iyi.
Derlemek için konsolu kullanıyorsanız, bunun gibi bir şey kullanabilirsiniz:
$ jade views/ --out html --prettyGerçekten güzel biçimlendirilmiş html'ye ihtiyacınız var mı? Bir editörde hoş görünen bir şey çıkarmaya çalışsanız bile, başka bir editörde garip görünebilir. Verilmiş, html için neye ihtiyacınız olduğunu bilmiyorum, ancak Firefox için krom geliştirme araçlarını veya firebug'u kullanmayı deneyeceğim. Bu araçlar, html yerine DOM'yi iyi bir şekilde görüntülemenizi sağlar.
Gerçekten güzel biçimlendirilmiş html gerekiyorsa, yeşim yerine EJS kullanmayı deneyin. Bu, html'yi kendiniz biçimlendirmeniz gerektiği anlamına gelir.
düzenli kullanabilirsin
örneğin bu yeşim dosyasını alın:
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şimdi testjade.js düğümü ile işleyebilirsiniz 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);
});sana bir şey verecek sevmek:
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></htmldaha sonra tidy -m output.html ile düzenli olarak çalıştırmak şöyle sonuçlanır:
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'ın önerisi, heres güzelleştirilmiş html görüntülemek için hızlı ve kirli bir yol
2) bunu .bashrc'nize ekleyin
function tidyme() {
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
}3) koş
$ tidyme localhost:3000/pathopen komutu yalnızca mac bilgisayarlarda çalışır. umarım yardımcı olur!
Express 4.x'te bunu app.js'nize ekleyin:
app.locals.pretty = app.get('env') === 'development';