मैं अच्छी तरह से स्वरूपित HTML आउटपुट के लिए एक्सप्रेस कैसे प्राप्त कर सकता हूं?

165

Node.js के लिए एक्सप्रेस का उपयोग करते समय, मैंने देखा कि यह HTML कोड को बिना किसी नए वर्ण या टैब के आउटपुट देता है। हालांकि यह डाउनलोड करने के लिए अधिक कुशल हो सकता है, यह विकास के दौरान बहुत पठनीय नहीं है।

— स्टीफन
स्रोत

313

आपके मुख्य app.jsया उसके स्थान पर क्या है:

एक्सप्रेस 4.x

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

एक्सप्रेस 3.x

app.configure('development', function(){
  app.use(express.errorHandler());
  app.locals.pretty = true;
});

एक्सप्रेस 2.x

app.configure('development', function(){
  app.use(express.errorHandler());
  app.set('view options', { pretty: true });
});

मैंने सुंदर प्रिंट डाला developmentक्योंकि आप 'बदसूरत' के साथ अधिक दक्षता चाहते हैं production। NODE_ENV=productionजब आप उत्पादन में तैनात कर रहे हों, तो पर्यावरण चर निर्धारित करना सुनिश्चित करें । यह एक shस्क्रिप्ट के साथ किया जा सकता है जिसे आप 'स्क्रिप्ट' क्षेत्र में उपयोग करते हैं package.jsonऔर शुरू करने के लिए निष्पादित किया जाता है।

एक्सप्रेस 3 ने इसे बदल दिया क्योंकि:

"दृश्य विकल्प" सेटिंग अब आवश्यक नहीं है, app.locals res.render () के साथ विलय किए गए स्थानीय चर हैं, इसलिए [app.locals.pretty = true पासिंग res.render (दृश्य, {सुंदर) के समान है : सच })।

— EhevuTov
स्रोत

1

कृपया इसे स्वीकार किए गए उत्तर को बदल दें क्योंकि यह आज तक का सही उत्तर है।

— वैल

यह काम किया, लेकिन मैं अतिरिक्त निर्भरता, अर्थात् का एक समूह स्थापित करने के लिए किया था promise, uglify-js, cssऔर lexical-scope(पहले के अनुरोध पर यह निर्माण होगा, लेकिन दुर्घटना) से पहले इसे फिर से चलाने जाएगा। मैंने केवल उस एक पंक्ति को जोड़ा।

— CWSpear

2

एक्सप्रेस 4.x में कैसे करें?

— एंटोनियो सालवती

3

@AntonioSalvati कोशिश करेंapp.locals.pretty = true

— ह्यूई टैन

1

यह एक भयानक जवाब है, वास्तव में मैं क्या देख रहा था। यह देखना ताज़ा है कि यह एक्सप्रेस के विभिन्न संस्करणों के लिए कैसे किया जाता है। मैंने अन्य मुद्दों के लिए खोज की है और उन उत्तरों को पाया है जो यह नहीं बताता कि यह किस संस्करण के लिए था।

— स्नोइन्फोर्नो

50

जेड / एक्सप्रेस में "सुंदर प्रारूप" एचटीएमएल आउटपुट:

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

— जोनाथन जूलियन
स्रोत

3

महान समाधान! काश, यह लेआउट / पृष्ठ के बीच भी इंडेंट स्तरों से मेल खाता होता।

— स्टीफन

34

रगड़ा हुआ। एक्सप्रेस 3 थोड़ा अलग काम करता है, देखें इहेवुतोव द्वारा लिखित पोस्ट।

7

4.x एक्सप्रेस में, इसे अपने app में जोड़ें। js:

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

— alarive
स्रोत

यहाँ काम किया - धन्यवाद! मेरे मामले में मेरे पास 'env' var सेट नहीं था। आप इसे मुख्य .js फ़ाइल में इस एक पंक्ति के साथ जोड़ सकते हैं: process.env.NODE_ENV = 'विकास';

— जीन बो

यदि आप अन्य उत्तर पहले से ही इसका समाधान दे रहे हैं तो आप इसका जवाब क्यों दे रहे हैं?

— nbro

मैं यह उत्तर देने वाला पहला व्यक्ति था, अन्य उत्तर को बाद में अपडेट किया गया था।

— अलायव

6

जेड में ही एक "सुंदर" विकल्प है:

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

... आपको यह मिलता है:

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

मैं बहुत परिष्कृत प्रतीत नहीं होता, लेकिन जो कुछ भी मैं हूं उसके लिए - वास्तव में HTML मेरे विचारों को डिबग करने की क्षमता - यह ठीक है।

— केविन फ्रॉस्ट
स्रोत

3

यदि HTML को डीबग करना है तो आप वेबकिट या फायरबग इंस्पेक्टर का उपयोग करके हमेशा HTML का 'निरीक्षण' कर सकते हैं। यह हमेशा एक पूरी तरह से स्वरूपित डोम ट्री उत्पन्न करता है।

— रोशाम्बो

@ रोशाम्बो सच है, लेकिन पेड़ के माध्यम से नेविगेट करने में समय लगता है, जब यू सिर्फ स्रोत को तेज कर सकता है (कभी-कभी)

— वैल

4

यदि आप कंसोल को संकलित करने के लिए उपयोग कर रहे हैं, तो आप कुछ इस तरह का उपयोग कर सकते हैं:

$ jade views/ --out html --pretty

— टॉम सरदयू
स्रोत

0

क्या तुम सच में अच्छी तरह से स्वरूपित html की जरूरत है? यहां तक कि अगर आप एक संपादक में कुछ अच्छा लगने की कोशिश करते हैं, तो यह दूसरे में अजीब लग सकता है। दी, मुझे नहीं पता कि आपको html की क्या आवश्यकता है, लेकिन मैं फ़ायरफ़ॉक्स के लिए क्रोम डेवलपमेंट टूल्स या फायरबग का उपयोग करने की कोशिश करूँगा। वे उपकरण आपको html के बजाय DOM का अच्छा दृश्य देते हैं।

यदि आपको वास्तव में सच में अच्छी तरह से स्वरूपित html की आवश्यकता है, तो जेड के बजाय ईजेएस का उपयोग करने का प्रयास करें। इसका मतलब है कि आपको HTML को स्वयं प्रारूपित करना होगा।

— ऑस्कर किलाडे
स्रोत

मुझे यह पसंद है कि अब मैंने कुछ समय के लिए काम किया है। मुझे लगता है कि मैं कुछ चीजों के बारे में बहुत खास हूं।

— स्टीफन

0

आप साफ उपयोग कर सकते हैं

उदाहरण के लिए इस जेड फ़ाइल को लें:

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

अब आप इसे नोड 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);
});

आपको s.th देगा पसंद:

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

तब इसे साफ सुथरा-एम आउटपुट के साथ सुव्यवस्थित रूप से चलाने के परिणामस्वरूप:

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>

— ओलिवर
स्रोत

0

जैतून के सुझाव से हटकर, सुशोभित html को देखने का एक त्वरित और गंदा तरीका है

1) साफ सुथरा डाउनलोड करें

2) इसे अपने .bashrc में जोड़ें

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

3) दौड़ें

$ tidyme localhost:3000/path

खुला आदेश केवल macs पर काम करता है। उम्मीद है की वो मदद करदे!

— ebaum
स्रोत

इंडेंट विकल्प के बारे में नहीं पता था ... अच्छा! मैं फॉर्मेटर में विम के निर्माण का उपयोग कर रहा था।

— जैतून

0

4.x एक्सप्रेस में, इसे अपने app में जोड़ें। js:

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

— petkovic43
स्रोत