Gruntfile का अनुकूलन करें

परिचय

यदि ग्रंट आपके लिए एक नया शब्द है, तो आप पहले क्रिस कॉयर्स के लेख " ग्रंट उन लोगों के लिए पढ़ सकते हैं जो सोचते हैं कि ग्रंट जैसी चीजें बदसूरत और भारी हैं । " क्रिस से परिचय के बाद, आपके पास अपना स्वयं का ग्रंट प्रोजेक्ट होगा और आप पहले से ही उन सभी अवसरों का स्वाद लेंगे जो ग्रंट हमें प्रदान करता है।

इस अनुच्छेद में, हम इस बात पर ध्यान केंद्रित नहीं करेंगे कि ग्रंट के लिए कई प्लगइन्स को आपकी परियोजना में क्या जोड़ा जाना चाहिए, लेकिन असेंबली बनाने की प्रक्रिया पर। आप ग्रंट के साथ काम करने के निम्नलिखित पहलुओं में व्यावहारिक कौशल प्राप्त करेंगे:

• कैसे अपने gruntfile को साफ सुथरा रखें
• अपने निर्माण समय में बहुत सुधार कैसे करें
• बिल्ड स्टेटस के बराबर में कैसे रखें

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

आपका ग्रंटफाइल का आयोजन

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

अनुकूलन से पहले ग्रन्टफाइल

यह हमारी ग्रन्टफ़ाइल अनुकूलन से पहले जैसा दिखता है:

module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { dist: { src: ['src/js/jquery.js','src/js/intro.js', 'src/js/main.js', 'src/js/outro.js'], dest: 'dist/build.js', } }, uglify: { dist: { files: { 'dist/build.min.js': ['dist/build.js'] } } }, imagemin: { options: { cache: false }, dist: { files: [{ expand: true, cwd: 'src/', src: ['**/*.{png,jpg,gif}'], dest: 'dist/' }] } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', ['concat', 'uglify', 'imagemin']); }; 

अगर अब आप कहने जा रहे हैं “अरे! मैंने सोचा कि यह बहुत बुरा होगा! इसे बनाए रखना काफी संभव है! ”, तब शायद आप सही होंगे। सरलता के लिए, हमने बिना किसी अनुकूलन के केवल तीन प्लगइन्स जोड़े। यदि यह लेख एक वास्तविक ग्रंटफाइल का उदाहरण देगा, जिसका उपयोग "मुकाबला" परियोजनाओं पर किया जाता है, तो हमें अंतहीन स्क्रॉलिंग की आवश्यकता होगी। खैर, देखते हैं कि हम इसके बारे में क्या कर सकते हैं!

ऑटोलॉड अपने प्लगइन्स

संकेत: लोड-ग्रंट-कॉन्फ़िगर में लोड-ग्रंट-फ़ंक्शंस शामिल हैं , इसलिए यदि आप इसके बारे में पढ़ना नहीं चाहते हैं, तो आप इस टुकड़े को छोड़ सकते हैं, यह मेरी भावनाओं को चोट नहीं पहुँचाएगा।

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

 // tell Grunt to load that plugin grunt.loadNpmTasks('grunt-contrib-concat'); 

यदि आप npm का उपयोग करके प्लगइन को हटाते हैं और अपने package.json को संपादित करते हैं, लेकिन Gruntfile को अपडेट करना भूल जाते हैं, तो आपकी असेंबली टूट जाएगी। यह यहां है कि छोटा प्लग-इन "लोड-ग्रंट-टास्क" हमारी सहायता के लिए आता है।

इस बिंदु तक, हमें अपने ग्रंट प्लग-इन को मैन्युअल रूप से लोड करना होगा:

 grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-imagemin'); 

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

 require('load-grunt-tasks')(grunt); 

प्लगइन कनेक्ट करने के बाद, यह आपके package.json का विश्लेषण करेगा, आपके प्लगइन्स की निर्भरता के पेड़ का निर्धारण करेगा और उन्हें स्वचालित रूप से लोड करेगा

स्प्लिट कॉन्फ़िगरेशन फ़ाइल

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

महत्वपूर्ण: अपने ग्रंटफाइल को साझा करना हमेशा सबसे अच्छा समाधान नहीं होता है। यदि आपके पास कार्यों के बीच कई संबंधित सेटिंग्स हैं (उदाहरण के लिए, ग्रंटफाइल को मानकीकृत करने के लिए), तो आपको थोड़ा अधिक सावधान रहना चाहिए।

"लोड-ग्रंट-कॉन्फिगर" प्लगइन का उपयोग करते समय, आपका ग्रंटफाइल इस तरह दिखाई देगा:

 module.exports = function(grunt) { require('load-grunt-config')(grunt); }; 

हाँ, यह वास्तव में है! यह पूरी फाइल है! लेकिन अब कॉन्फ़िगरेशन फाइलें कहां हैं?

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

 - myproject/ -- Gruntfile.js -- grunt/ --- concat.js --- uglify.js --- imagemin.js 

अब प्रत्येक कार्यों के लिए अलग-अलग फ़ाइलों में सेटिंग्स सेट करें (आप देखेंगे कि यह ग्रंटफ़ाइल से लगभग एक सामान्य कॉपी पेस्ट है)।

grunt / concat.js

 module.exports = { dist: { src: ['src/js/jquery.js', 'src/js/intro.js', 'src/js/main.js', 'src/js/outro.js'], dest: 'dist/build.js', } }; 

grunt / uglify.js

 module.exports = { dist: { files: { 'dist/build.min.js': ['dist/build.js'] } } }; 

grunt / imagemin.js

 module.exports = { options: { cache: false }, dist: { files: [{ expand: true, cwd: 'src/', src: ['**/*.{png,jpg,gif}'], dest: 'dist/' }] } }; 

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

ग्रंट / एलियासेस

 default: - 'concat' - 'uglify' - 'imagemin' 

वह सब है! कंसोल में निम्न आदेश चलाएँ:

 $ grunt 

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

विधानसभा का समय कम से कम करें

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

केवल वही बदला है जो बदल गया है: ग्रंट-नया

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

बेशक आप हमेशा दौड़ सकते हैं

 $ grunt imagemin 

मानक के बजाय अपने कंसोल से

 $ grunt 

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

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

हमारे उपनाम याद रखें। चलो बदलो

 default: - 'concat' - 'uglify' - 'imagemin' 

इसके लिए:

 default: - 'newer:concat' - 'newer:uglify' - 'newer:imagemin' 

सीधे शब्दों में, हम बस अपने किसी भी कार्य के लिए उपसर्ग "नया:" जोड़ते हैं, जिसे पहले ग्रंट-नए प्लगइन के माध्यम से पारित किया जाना चाहिए, जो बदले में, यह निर्धारित करेगा कि कौन सी फाइलें कार्य को चलाने के लिए और जिसके लिए नहीं।

समानांतर में कार्य चलाना: ग्रंट-समवर्ती

ग्रंट-समवर्ती एक प्लगइन है जो वास्तव में उपयोगी होता है जब आपके पास बहुत सारे कार्य होते हैं जो एक दूसरे से स्वतंत्र होते हैं और जो बहुत समय लेते हैं। यह आपके प्रोसेसर के कोर का उपयोग करता है, उन पर कार्यों को समानांतर करता है।

विशेष रूप से अच्छा है कि इस प्लगइन का विन्यास सुपर सरल है। यदि आप लोड-ग्रंट-कॉन्फ़िगरेशन का उपयोग करते हैं, तो स्लिप बनाएं। फ़ाइल:

grunt / समवर्ती। js

 module.exports = { first: ['concat'], second: ['uglify', 'imagemin'] }; 

हम पहले (पहली) और दूसरी (दूसरी) कतार के समानांतर निष्पादन को निर्धारित करते हैं। पहले चरण में, हम केवल "कॉनकट" कार्य चलाते हैं। दूसरे चरण में, हम बदसूरत और इमेजमिन चलाते हैं, क्योंकि वे एक दूसरे से स्वतंत्र हैं, उन्हें समानांतर में निष्पादित किया जाएगा, और इसलिए, निष्पादन का समय दोनों कार्यों के लिए सामान्य होगा।

हमने अपने डिफ़ॉल्ट कार्य के उपनाम को ग्रंट-समवर्ती प्लगइन के माध्यम से संसाधित किया है। निम्नलिखित संशोधित उपनामों की फाइल है:

 default: - 'concurrent:first' - 'concurrent:second' 

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

एक त्वरित टिप : हमारे सरल उदाहरण में, ग्रंट-समवर्ती हमारे निर्माण को तेज़ी से बनाने के लिए अत्यधिक संभावना नहीं है। कारण ग्रंट उदाहरणों के लिए अतिरिक्त धागे चलाने के लिए ओवरहेड (ओवरहेड) है। मेरी गणनाओं को देखते हुए, इसमें कम से कम 300ms / धारा लगती है।

विधानसभा में कितना समय लगा? टाइम-ग्रंट बचाव के लिए आता है

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

टाइम-ग्रंट शास्त्रीय अर्थों में एक प्लगइन नहीं है (यह लोडएनएमटैस्क के माध्यम से कनेक्ट नहीं होता है), यह उन प्लगइन्स को संदर्भित करता है जो आप "सीधे" कनेक्ट करते हैं, जैसे कि लोड-ग्रंट-कॉन्फ़िगरेशन। हम इस प्लगइन के कनेक्शन को अपने ग्रंटफाइल में उसी तरह जोड़ देंगे जैसे हमने पहले ही लोड-ग्रंट-कॉन्फिगर के लिए किया था। अब हमारे ग्रंटफाइल को इस तरह दिखना चाहिए:

 module.exports = function(grunt) { // measures the time each task takes require('time-grunt')(grunt); // load grunt config require('load-grunt-config')(grunt); }; 

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

स्वचालित चेतावनी प्रणाली

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

डिफ़ॉल्ट रूप से, ग्रन्ट-नोटिफिकेशन सभी त्रुटियों और चेतावनियों के लिए स्वचालित अलर्ट प्रदान करता है जो ग्रन्ट फेंकता है। ऐसा करने के लिए, वह आपके OS पर स्थापित किसी भी चेतावनी प्रणाली का उपयोग कर सकता है: Mac OS X या Windows, Mountain Lion's और Mavericks के Notification Center और, Notify-send के लिए बढ़ो। यह आश्चर्यजनक है कि आपको यह कार्यक्षमता प्राप्त करने की आवश्यकता है npm रिपॉजिटरी से प्लगइन स्थापित करना और इसे अपने ग्रंटफाइल से कनेक्ट करना है (याद रखें, यदि आप ग्रंट-लोड-कॉन्फ़िगरेशन का उपयोग करते हैं, जैसा कि ऊपर वर्णित है, तो यह कदम स्वचालित है!)।

यहां बताया गया है कि आपके ऑपरेटिंग सिस्टम के आधार पर प्लगइन कैसे काम करता है:



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

grunt / अधिसूचित। js

 module.exports = { imagemin: { options: { title: 'Build complete', // optional message: '<%= pkg.name %> build finished successfully.' //required } } } } 

हमारे कॉन्फ़िगरेशन की हैश कुंजी उस कार्य का नाम निर्धारित करती है जिसके लिए हम ग्रंट-सूचित कनेक्ट करना चाहते हैं। यह उदाहरण इमेजमिन कार्य (निष्पादित करने की सूची में अंतिम एक) पूरा होने के तुरंत बाद एक अलर्ट उत्पन्न करेगा।

और निष्कर्ष में

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

यदि आप अन्य रोचक समाधानों की खोज करते हैं जो ग्रंट को बेहतर बनाने में मदद करेंगे या कहें, उपयोगी प्लगइन्स, तो कृपया हमें बताएं! इस बीच, सफल बनाता है!

अनुवादक से

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

मुझे उम्मीद है कि आपको लेख अच्छा लगा होगा। मैं रचनात्मक आलोचना और सुधार के सुझाव सुनकर प्रसन्न हूं। टिप्पणियाँ भी स्वागत है!