अपने वर्कफ़्लो [ट्यूटोरियल] को स्वचालित करने के लिए ग्रन्ट का उपयोग कैसे करें

मैं ए स्वचालन के बड़े वकील क्योंकि यह जीवन को इतना सरल बनाता है। जब आप अपने लिए चीजें करने के लिए कंप्यूटर रखते हैं, तो अपने जीवन-शक्ति को चूसने के लिए मासिक धर्म, नीरस कार्यों पर समय क्यों व्यतीत करें? यह वेब विकास के लिए विशेष रूप से सच है.

कई विकास कार्य एक काम हो सकते हैं। विकास करते समय आप कोड को संकलित करना चाह सकते हैं, जब एक विकास संस्करण को धक्का देते हैं तो आप फ़ाइलों को संक्षिप्त और छोटा कर सकते हैं, केवल विकास के संसाधनों को हटा सकते हैं, और इसी तरह। यहां तक ​​कि अपेक्षाकृत सीधी तरह की फाइलें, या फ़ोल्डरों का नाम बदलने का एक समूह भी हटा सकते हैं हमारे समय का एक बड़ा हिस्सा उठा सकता है.

इस लेख में मैं आपको दिखाऊंगा कि कैसे आप ग्रांट, एक जावास्क्रिप्ट टास्क रनर द्वारा दी गई उत्कृष्ट कार्यक्षमता का लाभ उठाकर अपने जीवन को आसान बना सकते हैं। मैं आपको पूरी प्रक्रिया के माध्यम से मार्गदर्शन करूँगा, भले ही आप जावास्क्रिप्ट विज़ार्ड न हों!

Hongkiat.com पर अधिक:

• CSSMatic वेब डिजाइनरों के लिए CSS को आसान बनाता है
• फ़ोल्डर क्रियाओं के साथ मैक में स्वचालित कार्य
• कार्रवाई के साथ अपने ड्रॉपबॉक्स फ़ाइलों को स्वचालित करें
• अपने Android डिवाइस पर कार्य स्वचालित करने में मदद करने के लिए 10 एप्लिकेशन
• ड्रॉपबॉक्स में अपनी वेबसाइट का बैकअप कैसे (स्वचालित रूप से) लें

ग्रंट स्थापित करना

ग्रंट स्थापित करना बहुत आसान है क्योंकि यह नोड पैकेज मैनेजर का उपयोग करता है। इसका मतलब यह है कि आपको स्वयं नोड भी स्थापित करना पड़ सकता है। एक टर्मिनल या कमांड प्रॉम्प्ट खोलें (मैं अब से इस टर्मिनल को कॉल करूंगा) और दर्ज करें nmp -v.

अगर आपको एक वर्जन नंबर दिख रहा है NPM स्थापित, यदि आपको "कमांड नहीं मिली" त्रुटि दिखाई देती है, तो आपको इसे नोड डाउनलोड पेज पर जाकर स्थापित करना होगा और आपको आवश्यक संस्करण का चयन करना होगा.

एक बार नोड स्थापित हो जाने के बाद, ग्रंट प्राप्त करना टर्मिनल में जारी एकल आदेश का मामला है:

npm स्थापित -g grunt-cli

मूल उपयोग

आप प्रोजेक्ट-से-प्रोजेक्ट के आधार पर ग्रंट का उपयोग कर रहे हैं क्योंकि प्रत्येक प्रोजेक्ट की अलग-अलग आवश्यकताएं होंगी। आइए अब एक प्रोजेक्ट शुरू करें और एक फोल्डर बनाकर इसे हमारे टर्मिनल के माध्यम से नेविगेट करें.

दो फाइलें ग्रंट के दिल को बना देती हैं: package.json तथा Gruntfile.js. पैकेज फ़ाइल आपके द्वारा उपयोग किए जाने वाले सभी तृतीय-पक्ष निर्भरता को परिभाषित करती है, ग्रंटफ़ाइल आपको नियंत्रित करने देता है किस तरह वास्तव में इनका उपयोग किया जाता है। आइए अब निम्नलिखित सामग्री के साथ एक नंगे हड्डियों का पैकेज फ़ाइल बनाएँ:

"नाम": "परीक्षण-परियोजना", "संस्करण": "1.0", "अवमूल्यन": "ग्रंट": "~ 0.4.5",

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

आप अपने आप से पूछ सकते हैं कि एक स्क्वीलली लाइन (~) जिसे टिल्ड कहा जाता है, वहां क्या कर रही है.

Npm के लिए सिमेंटिक वर्कर से नियमों का उपयोग करके संस्करणों की आवश्यकता हो सकती है। संक्षेप में:

• आप जैसा सटीक संस्करण निर्दिष्ट करते हैं 4.5.2
• आप न्यूनतम या अधिकतम संस्करण जैसे इंगित करने के लिए की तुलना में अधिक / से कम का उपयोग कर सकते हैं > 4.0.3
• टिल्ड का उपयोग एक संस्करण ब्लॉक को निर्दिष्ट करता है। का उपयोग करते हुए ~ 1.2 माना जाता है 1.2.x, कोई भी संस्करण 1.2.0 से ऊपर लेकिन 1.3 से नीचे

संस्करणों को निर्दिष्ट करने के बहुत अधिक तरीके उपलब्ध हैं लेकिन यह अधिकांश आवश्यकताओं के लिए पर्याप्त है। अगला कदम ग्रंटफाइल बनाना है जो हमारे ऑटोमेशन को पूरा करेगा.

 मॉड्यूल.एक्सपोर्ट्स = फंक्शन (ग्रंट) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('डिफ़ॉल्ट', []); ; 

यह मूल रूप से एक ग्रंटफाइल के लिए कंकाल है; ब्याज की दो जगहें हैं। एक स्थान के अंदर है initConfig () समारोह। यह वह जगह है जहां आपके सभी प्रोजेक्ट कॉन्फ़िगरेशन जाते हैं। इसमें LESS / SASS संकलन, स्क्रिप्ट्स को छोटा करना इत्यादि जैसी चीजें शामिल होंगी.

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

उदाहरण के लिए, एक कार्य जिसका नाम है “स्क्रिप्ट” हमारी सभी लिपियों को संक्षिप्त कर सकते हैं, फिर परिणामी फ़ाइल को छोटा करें और फिर इसे अपने अंतिम स्थान पर ले जाएं। इन तीनों क्रियाओं को परियोजना विन्यास में परिभाषित किया गया है लेकिन हैं “एक साथ खींचा हुआ” कार्य द्वारा। यदि यह स्पष्ट नहीं है तो अभी चिंता न करें, मैं आपको दिखा रहा हूँ कि यह कैसे किया जाता है.

हमारी पहली टास्क

आइए एक कार्य बनाएं जो हमारे लिए एक एकल जावास्क्रिप्ट फ़ाइल को छोटा करता है.

किसी नए कार्य को जोड़ने के लिए हमें चार चीजों की आवश्यकता होती है:

• यदि आवश्यक हो तो एक प्लगइन स्थापित करें
• ग्रंटफाइल में इसकी आवश्यकता है
• एक कार्य लिखें
• यदि आवश्यक हो तो इसे एक कार्य समूह में जोड़ें

(1) प्लगइन खोजें और इंस्टॉल करें

आपके लिए आवश्यक प्लगइन खोजने का सबसे आसान तरीका Google में कुछ इस प्रकार है: “जावास्क्रिप्ट ग्रन्ट प्लगइन को छोटा करें”. पहला परिणाम आपको grunt-contrib-uglify प्लगइन की ओर ले जाना चाहिए, जो कि बस हमारी जरूरत है.

जीथब पृष्ठ आपको वह सब बताता है जो आपको जानना चाहिए। स्थापना टर्मिनल में एक एकल लाइन है, यहाँ आपको क्या उपयोग करने की आवश्यकता है:

 npm ग्रंट-कंट्रीब्यूट-क्रुइलाइज़ --save-dev स्थापित करें 

आपको इसे व्यवस्थापक निजीकृत के साथ चलाने की आवश्यकता हो सकती है। अगर आपको कुछ मिलता है npm ईआरआर! कृपया इस कमांड को रूट / एडमिनिस्ट्रेटर के रूप में फिर से चलाने का प्रयास करें. जिस तरह से बस कमांड से पहले sudo टाइप करें और संकेत मिलने पर अपना पासवर्ड दर्ज करें:

 सुडो एनपीएम ग्रंट-कंट्रीब-क्रुइलाइज़ - सेवे-देव स्थापित करें 

यह कमांड वास्तव में आपके पर्स करता है package.json फ़ाइल और इसे एक निर्भरता के रूप में जोड़ता है, आपको मैन्युअल रूप से ऐसा करने की आवश्यकता नहीं होगी.

(२) ग्रंटफाइल में आवश्यकता

अगला कदम आवश्यकता के रूप में अपने ग्रंटफाइल में जोड़ना है। मुझे फ़ाइल के शीर्ष पर प्लगइन्स जोड़ना पसंद है, यहाँ जोड़ने के बाद मेरा पूरा ग्रंटफाइल है grunt.loadNpmTasks ( 'घुरघुराना-योगदान-रूप बिगाड़ना');.

 मॉड्यूल.एक्सपोर्ट्स = फंक्शन (ग्रंट) grunt.loadNpmTasks ('ग्रंट-कॉनरीब-क्रुलाइज़'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('डिफ़ॉल्ट', []); ; 

(३) स्क्रिप्ट बनाने के लिए एक कार्य बनाएँ

जैसा कि हमने चर्चा की, यह भीतर किया जाना चाहिए initConfig () समारोह। प्लगइन (और अधिकांश अन्य प्लगइन्स) के लिए Github पृष्ठ आपको बहुत सारी जानकारी और उदाहरण देता है। यहाँ मैं अपने परीक्षण परियोजना में इस्तेमाल किया है.

 uglify: build: src: 'js / script.js', dest: 'js / script.min.js' 

यह बहुत सीधा है, मैंने निर्दिष्ट किया scripts.js मेरे प्रोजेक्ट के js डायरेक्टरी में फाइल करें और मिनिफाई फाइल के लिए डेस्टिनेशन। स्रोत फ़ाइलों को निर्दिष्ट करने के कई तरीके हैं, हम बाद में उस पर एक नज़र डालेंगे.

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

 मॉड्यूल.एक्सपोर्ट्स = फंक्शन (ग्रंट) grunt.loadNpmTasks ('ग्रंट-कॉनरीब-क्रुलाइज़'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'script.js', dest: 'script.min.js'); grunt.registerTask ('डिफ़ॉल्ट', []); ; 

(4) इस कॉन्फ़िगरेशन को किसी कार्य समूह में जोड़ें

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

 grunt.registerTask ('डिफ़ॉल्ट', ['uglify']); 

इस स्तर पर आपके टर्मिनल पर जाने में सक्षम होना चाहिए, टाइप करें असंतोष का शब्द और मिनिमाइज़ेशन जगह ले सकते हैं। एक बनाने के लिए मत भूलना scripts.js पाठ्यक्रम की फाइल!

यह सेट करने में बहुत समय नहीं लगा? यहां तक ​​कि अगर आप इस सब के लिए नए हैं और आपको चरणों के माध्यम से काम करने में कुछ समय लगा है, तो यह जिस समय की बचत करता है वह कुछ समय के लिए इस पर खर्च किए गए समय को पार कर जाएगा.

सम्‍मिलित करने वाली फाइलें

आइए कॉन्टेक्टिंग फाइल्स और देखें लक्ष्य के रूप में एकाधिक फ़ाइलों को निर्दिष्ट करना सीखें जिस तरह से साथ.

कॉन्टैटेनेशन एक फाइल में कई फाइलों के कंटेंट को मिलाने की प्रक्रिया है। हमें grunt-contrib-concat प्लगइन की आवश्यकता होगी। चलो चरणों के माध्यम से काम करते हैं:

प्लगइन का उपयोग स्थापित करने के लिए npm ग्रंट-कंट्रीब-कॉनसैट - सेवे-देव स्थापित करें टर्मिनल में। एक बार हो जाने के बाद, उपयोग करने से पहले इसे अपने ग्रंटफाइल में जोड़ना सुनिश्चित करें grunt.loadNpmTasks ( 'घुरघुराना-योगदान-concat');.

अगला विन्यास है। आइए तीन विशिष्ट फ़ाइलों को मिलाएं, वाक्यविन्यास परिचित होगा.

 concat: Dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / लिप्स.जेएस', , 

ऊपर दिया गया कोड स्रोत के रूप में दी गई तीन फ़ाइलों को लेता है और उन्हें गंतव्य के रूप में दी गई फ़ाइल में जोड़ती है.

यह पहले से ही बहुत शक्तिशाली है लेकिन क्या होगा अगर एक नई फ़ाइल जोड़ी जाती है? क्या हमें हर समय यहाँ वापस आने की आवश्यकता है? बेशक, हम फ़ाइलों के एक पूरे फ़ोल्डर को संक्षिप्त करने के लिए निर्दिष्ट कर सकते हैं.

 concat: Dist: src: 'dev / js / *। js "], डेस्ट:' js / script.js ',,, 

अब, देव / js फ़ोल्डर के भीतर किसी भी जावास्क्रिप्ट फ़ाइल को एक बड़ी फ़ाइल में विलय कर दिया जाएगा: जे एस / scripts.js, काफी बेहतर!

अब एक कार्य बनाने का समय आ गया है इसलिए हम वास्तव में कुछ फाइलों को संक्षिप्त कर सकते हैं.

 grunt.registerTask ('मर्जेज', ['कॉनकट']); 

जब हम जारी करते हैं तो यह डिफ़ॉल्ट कार्य नहीं होता है इसलिए हमें टर्मिनल में उसका नाम लिखना होगा असंतोष का शब्द आदेश.

 ग्रंट मर्ज 

हमारे स्वचालन को स्वचालित करना

हमने पहले ही बहुत प्रगति कर ली है, लेकिन और भी बहुत कुछ है! अभी के लिए, जब आप टर्मिनल पर जाना या छोटा करना चाहते हैं, तो आपको टर्मिनल पर जाने की आवश्यकता है और उपयुक्त कमांड टाइप करें। यह उच्च समय है जब हम इस पर एक नज़र डालते हैं घड़ी कमांड जो हमारे लिए ऐसा करेगी। हम यह भी सीखेंगे कि कैसे एक ही बार में विविध कार्यों को अंजाम दिया जाए.

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

 घड़ी: स्क्रिप्ट: फाइलें: [dev देव / जेएस / *। जेएस ’], कार्य: [at कॉन्कटैट’,] कुरूप ’],, 

मैंने देखने के लिए फ़ाइलों का एक सेट नामित किया है “स्क्रिप्ट”, बस मुझे पता है कि यह क्या करता है। इस ऑब्जेक्ट के भीतर मैंने देखने के लिए फ़ाइलें और चलाने के लिए कार्य निर्दिष्ट किए हैं। पिछले सहमति उदाहरण में हमने देव / js डायरेक्टरी की सभी फाइलों को एक साथ खींचा है.

माइनिफिकेशन उदाहरण में हमने इस फाइल को छोटा किया है। यह परिवर्तन के लिए dev / js फोल्डर को देखने और इन कार्यों को चलाने के लिए समझ में आता है जब भी कोई हो.

जैसा कि आप देख सकते हैं, कई कार्यों को अल्पविराम से अलग करके आसानी से बुलाया जा सकता है। वे क्रम में प्रदर्शन करेंगे, पहले संघटन, फिर इस मामले में संशोधन। यह कार्य समूहों के साथ भी किया जा सकता है, जो इस तरह का है कि वे क्यों मौजूद हैं.

अब हम अपने डिफ़ॉल्ट कार्य को संशोधित कर सकते हैं:

 grunt.registerTask ('डिफ़ॉल्ट', ['कॉन्सेट', 'uglify']); 

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

यह वहां बैठ जाएगा, इन फ़ाइलों को संशोधित करने के लिए आपका इंतजार कर रहा है। एक बार जब आप ऐसा कर लेंगे, तो यह उसे सौंपे गए सभी कार्यों को पूरा करेगा, आगे बढ़ें, इसे आज़माएँ.

यह बहुत बेहतर है, हमारे लिए किसी इनपुट की आवश्यकता नहीं है। अब आप अपनी फ़ाइलों के साथ काम कर सकते हैं और सब कुछ आपके लिए अच्छा होगा.

अवलोकन

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

SASS को संकलित करने के लिए, छवियों का अनुकूलन करने के लिए आदेशों का उपयोग करना, ऑटोप्रिक्सिंग, और बहुत कुछ हमारे द्वारा चर्चा किए गए सिंटैक्स को पढ़ने और पढ़ने के लिए आवश्यक है।.

यदि आप ग्रंट के लिए कुछ विशेष रूप से महान उपयोगों के बारे में जानते हैं, तो कृपया हमें टिप्पणियों में बताएं, हम हमेशा यह सुनना चाहते हैं कि आप ग्रंट जैसे उपकरणों का उपयोग कैसे करते हैं!