जीवन को आसान बनाना, GruntJS (शुरुआती के लिए)

ग्रंटज क्या है?

अधिकांश जेएस डेवलपर्स पहले से ही अपने विकास के लिए कुछ प्रकार के बिल्ड टूल का उपयोग करते हैं, भले ही वे इस शब्द का उपयोग न करें या न करें। वे विकास के दौरान फ़ाइलों को जोड़ते हैं, पृष्ठ लोडिंग को तेज करने और सैस को बदलने के लिए जावास्क्रिप्ट कोड को कम करते हैं, या ब्राउज़र के लिए सीएसएस में फ़ाइलों की संख्या को कम करते हैं, और बहुत कुछ। ज्यादातर अक्सर ये अलग-अलग उपकरण होते हैं, जो बहुत सुविधाजनक नहीं है।

ग्रंट आपको इन सभी चरणों को एक स्थान पर प्रबंधित करने और तीसरे पक्ष के घटकों को व्यवस्थित करने में मदद करता है।

और हमें इस खुशी की आवश्यकता क्यों है?

प्रोग्रामिंग के विभिन्न क्षेत्रों में पहले से मौजूद सभी उपकरणों की अपनी नींव थी। चूंकि वे मुख्य रूप से जेएस डेवलपर्स के लिए नहीं बनाए गए थे, इसलिए उनके पास अपने पेशेवरों और विपक्ष थे। कुछ को अन्य भाषाओं के ज्ञान की आवश्यकता होती है या अलग-अलग एक्सएमएल बोलियों का उपयोग करना पड़ता है जो आपको पहले सीखने की आवश्यकता होती है, और फिर उन्हें कॉन्फ़िगर करना इतना आसान नहीं होता है।
तो क्यों नहीं एक उपकरण है कि विशेष रूप से इस के लिए डिज़ाइन किया गया है, कि एक भाषा में लिखा है कि JS डेवलपर्स दैनिक उपयोग करते हैं, जो उनके लिए इसे सरल बनाता है? ग्रंट पूरी तरह से जावास्क्रिप्ट में लिखा गया है और Node.js पर चलता है, इसका उपयोग विभिन्न प्लेटफार्मों पर किया जा सकता है।

मैं नोड्ज लगाने की उम्मीद करता हूं, यह मुश्किल नहीं होगा। विंडोज़ उपयोगकर्ताओं के लिए इसके बारे में एक टिप्पणी: नोडज और इसके पैकेजों को नियंत्रित करने के लिए पूरी तरह से कमांड लाइन का उपयोग करने के लिए, मैं आपको https://code.google.com/p/msysgit/ डालने की सलाह देता हूं।

ग्रंट अभी भी युवा है, लेकिन हाल ही में जारी संस्करण 0.4 में कुछ महत्वपूर्ण बदलाव आए हैं। अब इसमें केवल एक छोटी कमांड लाइन क्लाइंट और मुख्य कार्य दिखा रहा है। सभी अतिरिक्त कार्य प्लगइन्स पर आधारित हैं, इसलिए आप इसे बिना किसी तामझाम के अपनी परियोजना की विशेष आवश्यकताओं के लिए अनुकूलित कर सकते हैं। ग्रन्ट और सभी प्लग-इन को आपकी परियोजना निर्देशिका में जोड़ा जाता है ताकि यह सुनिश्चित किया जा सके कि आपके प्रोजेक्ट को बनाने और बनाए रखने के लिए आपको जो कुछ भी चाहिए वह हमेशा बना रहे। ये मॉड्यूल या तो प्रोजेक्ट के साथ डाउनलोड किए जा सकते हैं, या यदि विकास प्लेटफ़ॉर्म अलग हैं, तो फ़ाइल, फ़ाइल ग्राउंड (बाद में उस पर अधिक) में उपयोग किए जाने वाले सभी मॉड्यूल को स्टोर करना बेहतर है।

हालाँकि ग्रंट अभी भी बहुत जल्दी है, पहले से ही आपके सभी विकास की ज़रूरतों के लिए बहुत सारे प्लगइन्स मौजूद हैं:

जावास्क्रिप्ट और सीएसएस को कम करना, सीएसएस / कम्पास, कम और स्टाइलस, कॉफ़ीस्क्रिप्ट या लाइवस्क्रिप्ट सास / कम्पास जैसे सीएसएस और प्रीप्रोसेसरों को एकीकृत करना, पीएनजी और जेपीईजी छवि फ़ाइल आकारों का अनुकूलन और स्वचालित रूप से छवियों को एम्बेड करना, और बहुत कुछ।

यदि आप बड़े वेब एप्लिकेशन लिखने की योजना बनाते हैं, तो ग्रंट ने आवश्यकताएँ .js और Google क्लोजर कंपाइलर के लिए अनुकूलन को भी एकीकृत किया और आपको हैंडलबार, जेड, अंडरस्कोर, मूंछ, इको या होगन टेम्पलेट्स को पूर्व-संकलन करने की अनुमति देता है। सबसे आम टेस्ट फ्रेमवर्क जैसे कि जैस्मीन, मोचा, क्विंट और ककड़ी के लिए पहले से ही प्लगइन्स हैं।
सभी उपलब्ध प्लगइन्स में ग्रंट वेबसाइट पर लिंक हैं (और यदि कोई व्यक्ति "Gruntplugin" कीवर्ड के साथ एक नया Node.js मॉड्यूल प्रकाशित करता है, तो यह स्वचालित रूप से सूची में जुड़ जाता है)।
जैसा कि आप देख सकते हैं, ग्रंट न केवल आपको अपना प्रोजेक्ट बनाने में मदद करेगा, बल्कि बाहरी उपकरणों के लिए केंद्रीय ट्यूनिंग नोड के रूप में भी काम करेगा।

काम के लिए स्थापना और तैयारी

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

npm install grunt-cli -g 

ग्रंट कमांड लाइन टूल इंस्टॉल करने के लिए।

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

सबसे पहले, प्रोजेक्ट रूट फ़ोल्डर में एक फ़ाइल बनाएँ जिसे package.json कहा जाता है। यदि आप Node.js से परिचित हैं, तो आप पहले से ही इस फ़ाइल से परिचित हो सकते हैं, हम अपनी परियोजना के लिए सबसे बुनियादी के साथ शुरू करेंगे।

 { "author" : "authorName", "name" : "FrontEnd-Project", "version" : "0.0.1", "devDependencies" : { "grunt" : ">= 0.4", "grunt-cli" : ">= 0.1.6", "grunt-contrib-watch" : "~0.3.1", "grunt-contrib-cssmin" : ">=0.5.0", "grunt-contrib-uglify" : ">=0.2.0", "grunt-contrib-concat" : ">=0.1.3" } } 

(package.json, नोडज के लिए सेटिंग फ़ाइल है। हमने फ़ाइल को प्रोजेक्ट फ़ोल्डर की जड़ में रखा है। कंसोल खोलें, फ़ोल्डर पर जाएँ और npm इंस्टॉल को निष्पादित करें, फ़ाइल में वर्णित सभी पैकेज और निर्भरताएँ आपके प्रोजेक्ट फ़ोल्डर में इंस्टॉल हो जाएंगी। अधिक जानकारी http: // package .json.nodejitsu.com / )।

ग्रंट लॉन्च करें

ग्रंट और हमारी परियोजना के लिए आवश्यक सभी निर्भरताएं स्थापित होने के बाद, यह ग्रंट के विन्यास के साथ शुरू होने का समय है। इस प्रकार, हम पहले से बनाए गए package.json फ़ाइल के बगल में हमारी परियोजना की जड़ में Gruntfile.js नामक एक फ़ाइल जोड़ते हैं। यह ग्रंट कॉन्फ़िगरेशन के लिए मुख्य फ़ाइल है, जिसमें डाउनलोड करने योग्य कार्यों की सूची, और उनके काम का विवरण है।

मुख्य कॉन्फ़िगरेशन फ़ाइल इस तरह दिख सकती है:

 //    nodejs module.exports = function(grunt) { //   GruntJS grunt.initConfig({ //   GruntJS,        npm,     package.json   npm install //   javascript    jshint jshint: {}, //  concat: {} //   }); // ,    grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); //           grunt,   Enter grunt.registerTask('default', ['jshint', 'concat']); }; 

तो, आप देखते हैं कि सभी आवश्यक कॉन्फ़िगरेशन जावास्क्रिप्ट में लिखे गए हैं। मूल रूप से, आपको ग्रंट के साथ काम करने के लिए तीन अलग-अलग तरीकों की आवश्यकता है:

 grunt.initConfig grunt.loadNpmTasks grunt.registerTask 

प्रत्येक कार्य को कमांड लाइन से अलग से बुलाया जा सकता है, कमांड लाइन पैरामीटर के रूप में इसका नाम गुजर रहा है: उदाहरण के लिए, ग्रंट जिश्ट केवल आपके प्रोजेक्ट के मानकों को पूरा करने के लिए प्रोग्रामिंग शैली को नियंत्रित करने के उद्देश्य से कार्य करेगा। Grunt.registerTask के साथ, आप जब कोई पैरामीटर के बिना ग्रंट को बुलाया जाता है, तो चलाने के लिए एक डिफ़ॉल्ट कार्य को परिभाषित करता है। यह दिए गए क्रम में सूचीबद्ध कार्य करता है, हमारे मामले में jshint, concat और uglify।

वर्णन करें कि प्रत्येक प्लगइन वार्तालाप के लिए एक अलग विषय है। अक्सर इस्तेमाल किया जा सकता है यहाँ https://github.com/gruntjs/grunt-contrib । वहां आप पूर्ण विवरण और आमतौर पर उपयोग किए जाने वाले ग्रंटज प्लगइन्स के लिए नवीनतम संस्करण पा सकते हैं।

खैर, आखिरकार!

ग्रंट का उपयोग शुरू करने के लिए हम निम्नलिखित कदम उठाएंगे:

1. आपको नोडज स्थापित करने की आवश्यकता है, आप यहां अपने सिस्टम के लिए इंस्टॉलर पा सकते हैं। http://nodejs.org/
2. यदि आपके पास खिड़कियां हैं, तो मैं सुविधा के लिए https://code.google.com/p/msysgit/ स्थापित करने की सलाह देता हूं।
3. हम प्रोजेक्ट के साथ फ़ोल्डर में दो फाइलें package.json और Grunfile.js बनाते हैं, हम उन्हें कॉन्फ़िगर करते हैं, जैसा कि हम ऊपर पढ़ते हैं।
4. हम प्रोजेक्ट के लिए एक फ़ोल्डर बनाते हैं, या कंसोल का उपयोग करके एक मौजूदा एक में जाते हैं, और ग्रन्ट स्थापित करने के लिए एनपीएम इंस्टॉल कमांड चलाते हैं, और सभी आवश्यक पैकेज (जो पहले पैकेज में वर्णित हैं। json)।
5. खैर, ग्रंट लॉन्च करने के लिए, हम कंसोल में ग्रंट कमांड निष्पादित करते हैं।

ग्रंट के साथ, जेएस डेवलपर्स के पास पुनरावृत्ति कार्यों को स्वचालित करने में मदद करने के लिए एक बहुत ही लचीला उपकरण है। एक बार सेट हो जाने के बाद, आप समयबद्ध कार्य सेट कर सकते हैं, पृष्ठभूमि में यह जादू कर सकते हैं, या ग्रन्ट को अपने IDE या कोडिंग एडिटर को एक बाहरी विकास टीम के रूप में एकीकृत कर सकते हैं (जो उदाहरण के लिए, उदात्त पाठ में महान काम करता है)।

सत्यापन और परीक्षण कोड समग्र गुणवत्ता में सुधार करता है और आपको एक सुसंगत कोडिंग मानक बनाए रखने में मदद करता है, जो ग्रंट को बड़े पैमाने पर परियोजनाओं पर काम करने वाली टीमों के लिए एक आदर्श उपकरण बनाता है।

आधिकारिक वेबसाइट http://gruntjs.com/

आपका ध्यान के लिए धन्यवाद, जल्द ही मिलते हैं।