# 29: उत्पादन तैयार हो रहा है - सीएसएस-ट्रिक्स

जैसा कि हमने शुरू किया था, हम इसे इस सामान्य पाठ संपादक में वापस लाने जा रहे हैं। "वास्तविक दुनिया" स्थिति में, ये बातें सच हैं:

आप अपनी जावास्क्रिप्ट को उतनी छोटी फाइलों में तोड़ना चाहते हैं, जो आपके लिए समझ में आती हैं। जैसे हमने जावास्क्रिप्ट कोड को छोटे समझने योग्य कार्यों में तोड़ दिया, हम फ़ाइलों के साथ भी ऐसा कर सकते हैं। Var याद रखें Movies = ( );कि यह ऑब्जेक्ट संभवतः स्वयं की फ़ाइल होगी।
उन छोटी फ़ाइलों को संक्षिप्त किया जाना चाहिए (एक फ़ाइल में एक साथ संयुक्त) और संपीड़ित (व्हाट्सएप को हटाने के लिए एक minification प्रणाली के माध्यम से भाग गया और यहां तक कि चर को फिर से लिखना और अंतिम फ़ाइल का आकार कम करने के लिए)।

संघनन और संपीडन के कार्य इतने सामान्य हैं कि आपके वर्कफ़्लो में कोई फर्क नहीं पड़ता कि शायद एक उपकरण है जो मदद करने के लिए फिट होगा।

कोडकिट मैक सॉफ्टवेयर है जो इसके साथ मदद कर सकता है।

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

ऊपर दिए गए स्क्रीनशॉट में, आप सीएसएस-ट्रिक्स पर देख सकते हैं मेरे पास एक global.jsफाइल है जो कई अन्य फाइलों (निर्भरता) को आयात करती है। जब उस फ़ाइल को बदला / सहेजा जाता है, तो उसे जेएस हिंट के माध्यम से जांचा जाता है, निर्भरताएं निर्दिष्ट के रूप में जोड़ या पूर्वनिर्मित की जाती हैं, फिर अंतिम फ़ाइल बनाई जाती है ( global-ck.js) और खनन की जाती है। बहुत अच्छा!

आप उन निर्भरताओं को कोडकिट UI के माध्यम से सही तरीके से प्रबंधित कर सकते हैं, लेकिन जेएस फाइल में ही कोड टिप्पणी के माध्यम से इसे करना सबसे अच्छा है:

// put BEFORE the rest of the code in this file // @codekit-prepend "jquery.markitup.js" // put AFTER the rest of the code in this file // @codekit-append "prism.js"

फिर आप -ck.jsHTML में जावास्क्रिप्ट के संस्करण को लिंक करेंगे ।

क्या होगा यदि आप मैक पर नहीं हैं? आप विकल्पों के लिए चारों ओर Google कर सकते हैं। मैं यहाँ कुछ लिंक करूँगा, लेकिन यह दुनिया कभी बदल रही है। मुझे पता है कि कुछ ऐसे हैं जो अनिवार्य रूप से कोडकिट लुक और कार्यक्षमता की नकल करते हैं लेकिन क्रॉस-ब्राउज़र काम करते हैं और खुले स्रोत हैं।

मान लीजिए कि आपका प्रोजेक्ट रूबी ऑन रेल्स है। रेल में एसेट पाइपलाइन है जो आपके लिए यह कार्य करती है।

कोडकिट की तरह ही विशेष रूप से टिप्पणी की गई है ताकि यह पता चल सके कि निर्भरताएं क्या हैं, एसेट पाइपलाइन भी करता है:

//= require libs/jquery.js //= require common/love.js var MyObject = ( // yadda yadaa )

फिर आप अपने टेम्प्लेट से उस जावास्क्रिप्ट फ़ाइल को लिंक करते हैं जैसे:

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

ये केवल दो विकल्प नहीं हैं। ऐसा करने के लिए शायद अनगिनत तरीके हैं। इन दिनों एक और बहुत लोकप्रिय तकनीक ग्रंट है।

आप इन "कार्यों" को करने के लिए grunt-contrib-concat और grunt-contrib-uglify का उपयोग कर सकते हैं।

यहाँ एक नमूना Gruntfile.js है जो लाइब्रेरी निर्भरताओं से भरा एक फ़ोल्डर लेगा और एक Global.js फ़ाइल और उन्हें एक उत्पादन में सम्मिलित करेगा और इसे छोटा करेगा। js फ़ाइल:

module.exports = function(grunt) ( grunt.initConfig(( concat: ( dist: ( src: ( 'js/libs/*.js', 'js/global.js' ), dest: 'js/build/production.js', ) ), uglify: ( build: ( src: 'js/build/production.js', dest: 'js/build/production.min.js' ) ) )); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default', ('concat', 'uglify')); );

तो बस अपने प्रोजेक्ट फ़ोल्डर से कमांड लाइन से "ग्रंट" टाइप करना आपके लिए यही होगा। ग्रन्ट को और अधिक फैंसी तरीके मिल सकते हैं, हालांकि आपको संदेह हो सकता है। जो एक और दिन होना होगा!

मैंने एक उदाहरण परियोजना (डाउनलोड एक्सेस के साथ आप के लिए) को एक साथ रखा है ताकि आप देख सकें कि यह ग्रंट चीज़ कैसे काम करती है। आवश्यक शर्तें: