ग्रंट, जावास्क्रिप्ट परियोजनाओं के निर्माण के लिए एक उपकरण

ग्रंट कमांड लाइन से जावास्क्रिप्ट परियोजनाओं के निर्माण के लिए एक उपकरण है जो कार्यों का उपयोग करता है। रिलीज़ हाल ही में रिलीज़ हुई थी, बेन "काउबॉय" ऑलमैन के लेखक, परियोजना जीथूब पर है । इस लेख में, मैं ग्रंट की मूल बातें, इसकी स्थापना और उपयोग को कवर करूंगा।

कृपया ध्यान दें कि फिलहाल ग्रंट बीटा स्थिति में है और सक्रिय रूप से विकसित हो रहा है; इस लेख को लिखते समय संस्करण 0.3.9 का उपयोग किया गया था ।

स्थापना

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

यदि आप अपनी स्क्रीन पर एक समान चित्र देखते हैं, तो सभी निर्भरता के साथ ग्रंट स्थापित करें और हम एक प्रोजेक्ट बनाना शुरू कर सकते हैं।

प्रारंभ

पहले आपको एक नई परियोजना शुरू करने की आवश्यकता है। ग्रंट में कई आसान टेम्प्लेट होते हैं जो आपको commonjs , commonjs और node जैसी परियोजनाओं को शुरू करने की अनुमति देते हैं। उदाहरण के लिए, आइए एक jQuery प्रोजेक्ट बनाएं। प्रोजेक्ट के लिए एक फ़ोल्डर बनाएँ और grunt init:jquery चलाएं grunt init:jquery । आपसे कुछ सवाल पूछे जाएंगे। ग्रंट ब्रैकेट में डिफ़ॉल्ट मान दिखाता है, और यदि आप इसे बदलना नहीं चाहते हैं, तो बस एंटर दबाएं। यह मेरे लिए इस तरह देखा:


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

 watch: { files: '<config:lint.files>', tasks: 'lint qunit' } 

यह कार्य config:lint.files से फ़ाइलों का उपयोग करता है config:lint.files , अर्थात यह config:lint.files के निम्नलिखित सेक्शन को संदर्भित करता है:

 lint: { files: ['grunt.js', 'src/**/*.js', 'test/**/*.js'] } 

जैसे ही इनमें से कोई भी फाइल बदलती है qunit स्वचालित रूप से lint और qunit (जो आप जैसा सोचते हैं वैसा ही करेगा) qunit । बहुत सुंदर! मैं बाद में इसका प्रदर्शन करूंगा।
फ़ाइल के अंत में आप निम्नलिखित देखें:

 grunt.registerTask('default', 'lint qunit concat min'); 

यह qunit लिए एक निर्देश है कि जब मापदंडों के बिना शुरू किया जाता है, तो आपको lint , qunit , qunit और min निष्पादित करने की आवश्यकता होती है।

लांच

टर्मिनल में grunt टाइप करें और एंटर दबाएँ। दुर्भाग्य से, यह उम्मीद के मुताबिक मेरे लिए काम नहीं किया:

 Running "lint:files" (lint) task Lint free. Running "qunit:files" (qunit) task Testing jquery.jsplayground-demo.html Running PhantomJS...ERROR 

PhantomJS को स्थापित करना काफी सरल है, निर्देश यहां दिए गए हैं। PhantomJS Javascript ( Habr। , टिप्पणी अनुवादक पर एक लेख) के लिए एक कंसोल इंजन है, जो हमें क्यूनिट परीक्षण चलाने की अनुमति देगा। PhantomJS को स्थापित करने के बाद, ग्रंट कमांड के लिए कंसोल आउटपुट होगा:

तो इस स्क्रिप्ट ने क्या किया:

1. JSLint के माध्यम से कोड सत्यापन का शुभारंभ किया
2. बिना ब्राउज़र खोले स्वचालित रूप से क्यूनिट परीक्षण शुरू किया
3. सभी फाइलों को एक में मिलाया (हालांकि इस उदाहरण में हमारे पास एक फाइल पहले से है)
4. मर्ज किए गए फ़ाइल को छोटा किया

मुझे नहीं पता कि आपके लिए कैसा है, लेकिन मेरे लिए यह सिर्फ एक टीम के लिए एक अच्छा परिणाम है!
अगर, कहते हैं, मैं फ़ाइलों को बदलने के लिए हर बार इन सभी आदेशों को चलाना चाहता हूं, तो मुझे बस grunt.js संपादित करने की आवश्यकता है। watch अनुभाग खोजें जो कुछ इस तरह दिखता है:

 watch: { files: '<config:lint.files>', tasks: 'lint qunit' }, 

मैं यहां concat और min कार्य जोड़ सकता हूं, लेकिन जैसा कि आपको याद है, हमने एक default कार्य को परिभाषित किया है जो इन सभी कार्यों को करता है। इसलिए, फ़ाइलें बदलते समय, मैं बस default चला सकता हूं:

 watch: { files: '<config:lint.files>', tasks: 'default' } 

बेशक, वास्तव में, हर बार जब बचत बहुत अधिक होती है, तो concat और min चल रहा है, मैं सिर्फ यह दिखाना चाहता था कि यह संभव है। आप कई कार्य बना सकते हैं, एक डिफ़ॉल्ट रूप से शुरू करने के लिए, दूसरा रिलीज़ होने के लिए शुरू करने के लिए, तीसरा विकास के दौरान शुरू करने के लिए।
अब आइए एक नज़र डालते हैं उस जेएस फाइल पर जो स्वतः ही src/jquery.jsplayground-demo.js में बनाई गई थी। अंदर लाइसेंस, कॉपीराइट और जीथब के लिए एक लिंक का संकेत है - यह सब ग्रंट इनिट द्वारा स्वचालित रूप से जोड़ा गया है grunt init:jquery कमांड। अब watch को एक्शन में देखने के लिए इस फाइल में बदलाव करते हैं। सबसे पहले, आपको टर्मिनल में watch चलाने की आवश्यकता है: grunt watch । अब एक बदलाव करते हैं: मैं अमान्य जावास्क्रिप्ट पेश करने जा रहा हूँ ताकि हम एक JSLint त्रुटि देखें। मैंने फ़ाइल में some rubbish stuff मुद्रित किया और इसे बचाया। टर्मिनल में आउटपुट स्वचालित रूप से अपडेट किया जाता है:


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


और अब मैं अतिरिक्त परीक्षणों को हटा दूंगा, और सभी कार्य सफल होंगे:


बस कल्पना करें कि grunt watch चलाकर किसी प्रोजेक्ट पर काम करना कितना सुविधाजनक है और यह जानते हुए कि सभी कोड का परीक्षण, सत्यापन और खनन किया जाता है।

निष्कर्ष

मुझे उम्मीद है कि इस छोटी समीक्षा ने आपको ग्रंट का उपयोग करने के लिए प्रेरित किया। व्यक्तिगत रूप से, मैंने कई हालिया परियोजनाओं पर इसका इस्तेमाल किया और प्रसन्न हुआ।

लगभग। अनुवादक: मैं आपको ग्रंट-कंट्रीब प्रोजेक्ट देखने की सलाह भी देता हूं, इसमें असेंबली के दौरान सबसे आम कार्य शामिल हैं। सौभाग्य!