उत्पादन मोड में स्क्रिप्ट/सीएसएस को node.js

Question

के साथ छोटा करें मेरे पास एक वेब ऐप है जो नोड में चलता है। डीबग करना आसान बनाने के लिए सभी (क्लाइंट) जावास्क्रिप्ट/सीएसएस फ़ाइलों को इस समय छोटा नहीं किया गया है।

जब मैं उत्पादन में जा रहा हूं, तो मैं इन स्क्रिप्ट को छोटा करना चाहता हूं।

node app.js -production

मैं अपने html फ़ाइलें में स्क्रिप्ट टैग बदले बिना मेरी स्क्रिप्ट के minified संस्करण की सेवा करते हैं: ऐसा लगता है कि कुछ है करने के लिए अच्छा होगा? ऐसा कुछ होना चाहिए: यदि मैं उत्पादन में हूं, तो इन 2 मिनीफाइड (संयुक्त) स्क्रिप्ट का उपयोग करें, अन्य सभी मेरी असीमित स्क्रिप्ट का उपयोग करें ..

क्या यह संभव है? शायद मैं बहुत जटिल सोच रहा हूँ?

Answer 1

आपको Piler में रुचि हो सकती है। यह एक नोड.जेएस मॉड्यूल है जो डीबग मोड में सामान्य रूप से निर्दिष्ट सभी जावास्क्रिप्ट (और सीएसएस) फ़ाइलों को वितरित करता है, लेकिन उत्पादन मोड में समेकित और छोटा हो जाता है।

एक विशेष सुविधा के रूप में, आप अपने ब्राउज़र में दिखाई देने के लिए रीयल-टाइम में सॉकेट.ओ के माध्यम से सीएसएस अपडेट को मजबूर कर सकते हैं (जिसे "पीएलआर में" सीएसएस लाइव अपडेटेड "कहा जाता है), जो काफी शानदार है :-)।

चाल है कि अपने टेम्पलेट के अंदर आप केवल script और link तत्वों के लिए प्लेसहोल्डर है, और Piler कार्यावधि में इन तत्वों renders - डिबग मोड में एकल तत्व के रूप में, और उत्पादन मोड में एक गतिशील रूप से उत्पन्न एक तत्व के रूप में।

इस तरह आप अपनी संपत्ति के समेकित और संक्षिप्त संस्करणों को मैन्युअल रूप से या निर्माण उपकरण का उपयोग करने के बारे में भूल सकते हैं, यह केवल रनटाइम पर है, लेकिन विकासशील और डिबगिंग के दौरान आपके पास हमेशा अलग, पूर्ण संस्करण होते हैं।

Answer 2

आप 2 अलग-अलग स्थानों अपने स्टैटिक फ़ाइलें

के लिए यहाँ कुछ एक्सप्रेस कोड है इस्तेमाल कर सकते हैं:

if (process.env.MODE === "production") { 
    app.use(express['static'](__dirname + '/min')); 
} else { 
    app.use(express['static'](__dirname + '/normal')); 
} 

और इसके अलावा

MODE=production node app.js 

साथ नोड शुरू करते हैं, यदि आप नहीं करना चाहते हैं अपनी सभी फाइलों को डुप्लिकेट करें, आप इस तथ्य का लाभ उठा सकते हैं कि स्थिर राउटर पहली फ़ाइल पर रुक जाता है, और इसके बजाए ऐसा कुछ करता है:

if (process.env.MODE === "production") { 
    app.use(express['static'](__dirname + '/min')); // if minized version exists, serves it 
} 
app.use(express['static'](__dirname + '/normal')); // fallback to regular files 

कम से कम नाम के लिए उसी नाम का उपयोग करना या ब्राउज़र कैशिंग के साथ समस्या का कारण बनना नहीं है।

Answer 3

मैं अपने अंतिम समाधान को आपके साथ साझा करना चाहता हूं।

मैं एक्सप्रेस (enter link description here)

के लिए JSHTML का उपयोग अपने मुख्य नोड फ़ाइल में मैं एक विशेष मार्ग का उपयोग करें:

app.get('/**:type(html)', function (req, res, next) { 
var renderingUrl = req.url.substring(1, req.url.lastIndexOf(".")); 
//TODO: Find a better solution 
    try{ 
     var assetUrl = req.url.substring(req.url.lastIndexOf("/") + 1, req.url.lastIndexOf(".")); 
     var assets = config.getResourceBundle(assetUrl); 
     assets.production = config.getEnviroment() === "production"; 
     res.locals(assets); 
     res.render(renderingUrl); 
    }catch(e){ 
     res.redirect("/"); 
    } 
}); 

आप देख सकते हैं, मैं अपने संपत्ति config.getResourceBundle से मिलता है।यहाँ है

exports.getResourceBundle = function(identifier){ 
    switch(enviroment){ 
     case "development": 
      return devConfig.getResourceBundle(identifier); 
     case "production": 
      return prodConfig.getResourceBundle(identifier); 
     default: 
      return devConfig.getResourceBundle(identifier); 
    } 
} 

और एक परिसंपत्ति फ़ाइल संग्रह के लिए अंत में एक उदाहरण:

exports.getResourceBundle = function (identifier) { 
    return resourceBundle[identifier]; 
}; 


resourceBundle = { 
    index:{ 
     cssFiles:[ 
      "resources/dev/css/login.css", 
      "resources/dev/css/logonDlg.css", 
      "resources/dev/css/footer.css" 
     ], 
     jsFiles:[ 
      "resources/dev/js/lib/jquery/jquery.183.js", 
      "resources/dev/js/utilities.js", 
      "resources/dev/js/lib/crypto.3.1.2.js" 
     ] 
    }, 
    register:{ 
     cssFiles:[ 
      "resources/dev/css/login.css", 
      "resources/dev/css/modalDialog.css", 
      "resources/dev/css/footer.css" 
     ], 
     jsFiles:[ 
      "resources/dev/js/lib/jquery/jquery.183.js", 
      "resources/dev/js/utilities.js", 
      "resources/dev/js/lib/crypto.3.1.2.js", 
      "resources/dev/js/lib/jquery.simplemodal.js", 
      "resources/dev/js/xfiles.register.js" 
     ] 
    } 
(...) 

2 फ़ोल्डरों तो यह एक बस कार्य है। देव/प्रोड। grunt minified फ़ाइलों को prod/.. में कॉपी करेगा और फ़ाइलों को dev/... से हटा देगा और यदि NODE_ENV चर उत्पादन पर सेट है, तो मैं अपनी स्क्रिप्ट/सीएसएस के minified संस्करणों को भेज दूंगा। मुझे लगता है कि इस समय यह सबसे सुंदर समाधान है।

Answer 4

, आप के लिए उपकरण प्लग इन का निर्माण कर रहे हैं आप शान से इस समस्या को हल करने में मदद कर सकते हैं:

Gulp के लिए: https://www.npmjs.org/package/gulp-useref/

ग्रंट के लिए: https://github.com/pajtai/grunt-useref

Answer 5

एक और Node.js मॉड्यूल जो हो सकता है प्रासंगिक connect-cachify है।

यह आप के लिए वास्तविक minification करने के लिए प्रतीत नहीं होता है, लेकिन यह आप के उत्पादन में minified संस्करण, या विकास में सभी मूल स्क्रिप्ट की सेवा, (cachify_js और cachify_css करने के लिए धन्यवाद) टेम्पलेट्स बदले बिना जाने नहीं करता है।

लगता है कि यह पायलर के रूप में फीचर समृद्ध नहीं है, लेकिन शायद थोड़ा सा सरल है, और प्रश्न में उल्लिखित सभी आवश्यकताओं को पूरा करना चाहिए।