Saat menggunakan Express untuk Node.js, saya perhatikan bahwa itu mengeluarkan kode HTML tanpa karakter atau tab baris baru. Meskipun mungkin lebih efisien untuk mengunduh, itu tidak terlalu mudah dibaca selama pengembangan.
Bagaimana saya bisa mendapatkan Express to output HTML diformat dengan baik?
Jawaban:
Di main Anda app.jsatau apa yang ada di tempatnya:
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;
});Ekspresikan 2.x
app.configure('development', function(){
app.use(express.errorHandler());
app.set('view options', { pretty: true });
});Saya menaruh cetakan cantik di developmentkarena Anda ingin efisiensi lebih dengan 'jelek' production. Pastikan untuk mengatur variabel lingkungan NODE_ENV=productionsaat Anda menggunakan produksi. Ini dapat dilakukan dengan shskrip yang Anda gunakan di bidang 'skrip' package.jsondan dijalankan untuk memulai.
Express 3 mengubah ini karena:
Pengaturan "opsi tampilan" tidak lagi diperlukan, app.locals adalah variabel lokal yang digabungkan dengan res.render (), jadi [app.locals.pretty = true sama dengan mengirimkan res.render (view, {pretty : true}).
promise, uglify-js, cssdan lexical-scopesebelum itu akan berjalan lagi (itu akan membangun, tetapi kecelakaan pada permintaan pertama). Saya hanya menambahkan satu baris.
app.locals.pretty = true
Untuk output html "format cantik" di Jade / Express:
app.set('view options', { pretty: true });Di express 4.x, tambahkan ini ke app.js Anda:
if (app.get('env') === 'development') {
app.locals.pretty = true;
}Ada opsi "cantik" di Jade sendiri:
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() );... memberimu ini:
<!DOCTYPE html>
<html>
<body>
<div id="foo">I am a foo div!
</div>
</body>
</html>Saya tampaknya tidak terlalu canggih tetapi untuk apa yang saya cari - kemampuan untuk benar-benar men-debug HTML yang dihasilkan oleh pandangan saya - tidak apa-apa.
Jika Anda menggunakan konsol untuk dikompilasi, maka Anda dapat menggunakan sesuatu seperti ini:
$ jade views/ --out html --prettyApakah Anda benar-benar membutuhkan html yang diformat dengan baik? Bahkan jika Anda mencoba menampilkan sesuatu yang terlihat bagus di satu editor, itu bisa terlihat aneh di editor lain. Memang, saya tidak tahu untuk apa html Anda butuhkan, tetapi saya akan mencoba menggunakan alat pengembangan krom atau pembakar untuk Firefox. Alat-alat itu memberi Anda pandangan yang baik tentang DOM daripada html.
Jika Anda benar-benar membutuhkan html yang diformat dengan baik, maka coba gunakan EJS alih-alih batu giok. Itu berarti Anda harus memformat html sendiri.
Anda bisa menggunakan rapi
ambil contoh file jade ini:
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.emailsekarang Anda dapat memprosesnya dengan node 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);
});akan memberi Anda s.th. Suka:
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></htmllalu menjalankannya dengan rapi dengan rapi -m output.html akan menghasilkan:
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>membangun dari saran oliver, inilah cara cepat dan kotor untuk melihat html yang dipercantik
1) unduh rapi
2) tambahkan ini ke .bashrc Anda
function tidyme() {
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
}3) lari
$ tidyme localhost:3000/pathperintah terbuka hanya berfungsi pada mac. berharap itu bisa membantu!
Di express 4.x, tambahkan ini ke app.js Anda:
app.locals.pretty = app.get('env') === 'development';