7

मैं अपने दृश्यपटल कोड के लिए कुछ टेम्पलेट्स, जैसे के साथ एक HTML minifier उपयोग करने के लिए:कैसे अंडरस्कोर टेम्पलेट्स

<div class="row"> 
    <div class="my-header col-md-1"> 
     <!-- comments --> 
     {{ title }} 
    </div> 
    <div class="my-container col-md-11"> 
    {% if (content) { %} 
     {{ content }} 
    {% } else { %} 
     <p>Empty</p> 
    {% } %} 
    </div> 
</div> 

और मैं एक एकल फाइल में फिर एक और निर्माण कदम पर उन सब की दुकान और करने के लिए उपयोग कर रहा हूँ grunt-contrib-jst एक एकल जेएस फ़ाइल में शामिल किया जाएगा और वह फ़ाइल सीडीएन पर धकेल दी जाएगी। यह हिस्सा पूरी तरह से काम कर रहा है, लेकिन मैं HTML टेम्पलेट कोड को कम करने के लिए processContent विकल्प का उपयोग करना चाहता हूं, जिसमें अंडरकोर टेम्पलेट डिलीमीटर (<%...%>{% ... %}, <%= ... %> के साथ प्रतिस्थापित {{ ... }}) के साथ प्रतिस्थापित किया गया है।

मैं html-minifier का उपयोग करना चाहता था लेकिन यह वास्तव में कुछ भी कम नहीं करता है, जाहिर है क्योंकि यह टेम्पलेट को केवल HTML के रूप में पार्स करने की कोशिश करता है (और टेम्पलेट टैग के कारण विफल रहता है)।

क्या कोई नोड पैकेज/फ़ंक्शन है जो मुझे इस तरह के टेम्पलेट को कम करने की अनुमति देता है? मैं स्रोत टेम्पलेट्स में टिप्पणियों और व्हाइटस्पेस का उपयोग करना चाहता हूं लेकिन परिणामी बिल्ड फ़ाइल पर अनावश्यक सब कुछ पट्टी करना चाहता हूं।

फ़िलहाल मेरी JST सेटिंग्स पर इस राशि:

processContent: function (content) { 
    return content 
     .replace(/^[\x20\t]+/mg, '') 
     .replace(/[\x20\t]+$/mg, '') 
     .replace(/^[\r\n]+/, '') 
     .replace(/[\r\n]*$/, '\n'); 
}, 
... 

लेकिन मैं सब कुछ संभव कम करने के लिए, यही कारण है कि मैं html-minifier साथ करने की कोशिश की है चाहता हूँ।

धन्यवाद!

+0

क्या आपको कभी जवाब मिल गया? मुझे वही समस्या है जहां मेरा जेएसटी आकार काफी कम हो सकता है। –

+0

@JoshWLewis क्षमा करें, अभी तक कोई भाग्य नहीं है :(जाहिर है इस तरह के मिनीमाइज़र को अंडरस्कोर टैग से अवगत होना चाहिए और उन टैग के बाहर सबकुछ कम करना होगा। –

उत्तर

3

मैं अंडरस्कोर टेम्पलेट डिलीमीटर को कम करने में वास्तव में मदद नहीं कर सकता, फिर भी खुद को करने का सबसे अच्छा तरीका खोजने का प्रयास कर रहा हूं, लेकिन आप अपने टेम्पलेट्स को htmlclean के माध्यम से चलाने पर विचार करना चाहेंगे। मैं इसे r.js के साथ उपयोग करता हूं और यह कोड में न्यूलाइन और रिक्त स्थान को अलग करने के लिए वास्तव में अच्छा काम करता है। उदाहरण उपयोग:

var htmlclean = require('htmlclean'); 

// ... 
processContent: function (content) { 
    return htmlclean(content) 
     .replace(/^[\x20\t]+/mg, '') 
     .replace(/[\x20\t]+$/mg, '') 
     .replace(/^[\r\n]+/, '') 
     .replace(/[\r\n]*$/, '\n'); 
}, 

मैं HTML वहाँ में रेखांकित टेम्पलेट्स है कि यह उपयोग करने के साथ कोई समस्या नहीं मिला है। मुझे उम्मीद है इससे आपको मदद मिली होगी।

+0

धन्यवाद! मैं इसे आज़मा दूंगा :) –