शुरुआती लोगों के लिए सुपर सिंपल गल्प ट्यूटोरियल

इन दिनों, बिल्ड टूल का उपयोग आपके वेब डेवलपमेंट वर्कफ़्लो का एक अनिवार्य हिस्सा है।

गल्प इन दिनों सबसे लोकप्रिय बिल्ड टूल्स में से एक है (वेबपैक के साथ)।

लेकिन गल्प सीखने में एक निश्चित लर्निंग कर्व है।

सबसे बड़ी बाधाओं में से एक है इसमें शामिल सैकड़ों विभिन्न भागों का पता लगाना।

उसके ऊपर, आपको कमांड लाइन पर सब कुछ करना होता है, जो अविश्वसनीय रूप से डराने वाला हो सकता है अगर आपने इसके साथ ज्यादा काम नहीं किया है।

यह ट्यूटोरियल आपको npm (नोड पैकेज मैनेजर) की मूल बातें और अपने फ्रंट-एंड प्रोजेक्ट्स के लिए गल्प सेटअप करने के चरणों के माध्यम से ले जाएगा।

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

गल्प में क्या खास है?

गल्प एक बहुत बड़ा टाइम सेवर है। गल्प का उपयोग करके, आप अपने कंप्यूटर को थकाऊ कार्यों को संभालने दे सकते हैं, जैसे:

• सैस फाइलों को CSS में कंपाइल करना,
• एकाधिक जावास्क्रिप्ट फाइलों को जोड़ना (कॉन्कैटनेट करना),
• अपनी CSS और JS फाइलों को मिनीफाई (कंप्रेस) करना,
• और फाइल परिवर्तन का पता चलने पर उपरोक्त कार्यों को स्वचालित रूप से चलाना।

गल्प ऊपर बताए गए कार्यों से कहीं अधिक जटिल कार्य कर सकता है। हालांकि यह ट्यूटोरियल केवल गल्प की मूल बातों और यह कैसे काम करता है, इस पर केंद्रित होगा।

हम क्या करेंगे इसका त्वरित अवलोकन

यहाँ वे चरण हैं जिनसे यह ट्यूटोरियल गुजरेगा:

1. अपने कंप्यूटर पर Node.js और npm इंस्टॉल करें।
2. अपने प्रोजेक्ट के लिए आवश्यक गल्प और अन्य पैकेज इंस्टॉल करें।
3. अपनी gulpfile.js फ़ाइल को उन कार्यों को चलाने के लिए कॉन्फ़िगर करें जो आप चाहते हैं।
4. अपने कंप्यूटर को आपके लिए काम करने दें! 🙂

चिंता न करें अगर आप ऊपर के सभी शब्दों को पूरी तरह से नहीं समझते हैं। मैं सब कुछ एक बार में एक कदम समझाऊंगा।

अब शुरू करते हैं!

अपना एनवायरनमेंट सेटअप करें

Node.js

अपने कंप्यूटर पर गल्प को चालू करने के लिए, आपको अपने स्थानीय एनवायरनमेंट पर Node.js इंस्टॉल करना होगा।

Node.js को "जावास्क्रिप्ट रनटाइम" के रूप में वर्णित किया गया है, जिसे बैक-एंड जावास्क्रिप्ट माना जाता है। गल्प Node का उपयोग करके चलता है, इसलिए समझदारी से आपको शुरू करने से पहले Node इंस्टॉल करना होगा।

आप इसे Node.js वेबसाइट से डाउनलोड कर सकते हैं। जब आप Node इंस्टॉल करते हैं, तो यह आपके कंप्यूटर पर npm भी इंस्टॉल करता है।

Npm (नोड पैकेज मैनेजर)

Npm दुनिया भर के डेवलपर्स द्वारा लिखे गए जावास्क्रिप्ट प्लगइन्स (जिन्हें पैकेज कहा जाता है) का लगातार अपडेट होने वाला संग्रह है। गल्प उन प्लगइन्स में से एक है। (आपको कुछ और की भी आवश्यकता होगी, जिनके बारे में हम बाद में बात करेंगे।)

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

पैकेज इंस्टॉल करने का मूल सिंटैक्स यहाँ है:

npm install [पैकेज नाम]

काफी सीधा लगता है, है ना?

node_modules फोल्डर

एक बात ध्यान दें, जब आप एक npm पैकेज इंस्टॉल करते हैं, तो npm node_modules नामक एक फोल्डर बनाता है और वहां सभी पैकेज फाइलों को स्टोर करता है।

अगर आपने कभी node_modules फोल्डर वाले प्रोजेक्ट को देखा है और यह देखने की हिम्मत की है कि इसमें क्या है, तो आपने शायद देखा होगा कि इसमें बहुत सारे (और मेरा मतलब है बहुत सारे) नेस्टेड फोल्डर और फाइलें हैं।

ऐसा क्यों होता है?

क्योंकि npm पैकेज अपने विशिष्ट फ़ंक्शन को चलाने के लिए अन्य npm पैकेज पर भरोसा करते हैं। इन अन्य पैकेज को डिपेंडेंसी के रूप में जाना जाता है।

अगर आप एक प्लगइन लिख रहे हैं, तो मौजूदा पैकेज की कार्यक्षमताओं का लाभ उठाना समझदारी है। कोई भी हर बार पहिया का पुन: आविष्कार नहीं करना चाहता।

इसलिए जब आप अपने node_modules फोल्डर में एक प्लगइन इंस्टॉल करते हैं, तो वह प्लगइन फिर अपने स्वयं के node_modules फोल्डर में उन अतिरिक्त पैकेज को इंस्टॉल करेगा जिनकी *उसे* आवश्यकता है।

और इसी तरह तब तक जब तक आपके पास नेस्टेड फोल्डर न हो जाएं।

आपको इस बिंदु पर node_modules फोल्डर में गड़बड़ करने के बारे में ज्यादा चिंता करने की ज़रूरत नहीं है - बस संक्षेप में समझाना चाहता था कि उस क्रेजी फोल्डर में क्या चल रहा है 🙂

package.json के साथ पैकेज ट्रैक करना

npm की एक और अच्छी विशेषता यह है कि यह याद रख सकता है कि आपने अपने प्रोजेक्ट के लिए कौन से विशिष्ट पैकेज इंस्टॉल किए हैं।

यह महत्वपूर्ण है यदि आपको किसी कारण से सब कुछ पुन: इंस्टॉल करना पड़े।

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

यह कैसे करता है?

Npm package.json नामक एक फ़ाइल का उपयोग करता है ताकि यह ट्रैक कर सके कि आपने कौन से पैकेज और कौन से पैकेज संस्करण इंस्टॉल किए हैं। यह प्रोजेक्ट के बारे में अन्य जानकारी भी संग्रहीत करता है, जैसे इसका नाम, लेखक, और गिट रिपॉजिटरी।

अपना package.json बनाना

इस फ़ाइल को आरंभ करने के लिए, आप फिर से कमांड लाइन का उपयोग कर सकते हैं।

सबसे पहले, अपने प्रोजेक्ट फोल्डर पर नेविगेट करें, जहां भी वह आपके कंप्यूटर पर स्थित है।

फिर निम्न कमांड टाइप करें: npm init

Npm तब आपको प्रोजेक्ट के बारे में जानकारी दर्ज करने के लिए संकेत देगा। अधिकांश विकल्पों के लिए आप एंटर दबा सकते हैं और डिफ़ॉल्ट मान का उपयोग कर सकते हैं जो पैरेंथेसिस में है।

जब आप पूरा कर लेंगे, तो npm आपके प्रोजेक्ट फोल्डर में package.json फ़ाइल जनरेट करेगा! अगर आप इसे अपने एडिटर में खोलते हैं, तो आपको ऐसा कुछ दिखाई देना चाहिए:

{ "name": "super-simple-gulp-file", "version": "1.0.0", "description": "Super simple Gulp file", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/thecodercoder/Super-Simple-Gulp-File.git" }, "keywords": [ "gulp" ], "author": "Jessica @thecodercoder", "license": "ISC", "bugs": { "url": "https://github.com/thecodercoder/Super-Simple-Gulp-File/issues" }, "homepage": "https://github.com/thecodercoder/Super-Simple-Gulp-File#readme" } 

जाहिर है आपके प्रोजेक्ट के लिए आपके पास यहां मेरी जानकारी के बजाय अपना नाम और जानकारी होगी।

इस बिंदु पर मुझे सभी फ़ील्ड सही होने की चिंता नहीं होगी। यह सूचनात्मक भाग मुख्य रूप से उन पैकेज के लिए उपयोग किया जाता है जो npm पर सार्वजनिक प्लगइन्स के रूप में प्रकाशित होते हैं।

अब, जो आप *अपनी* package.json फ़ाइल में डालेंगे, वह गल्प चलाने के लिए आवश्यक सभी पैकेज की सूची है।

आइए देखें कि आप उन्हें कैसे जोड़ सकते हैं:

पैकेज इंस्टॉल करना

पिछले भाग में, हमने npm install [पैकेज नाम] टाइप करने के बारे में बात की थी

अपनी कमांड लाइन में, पैकेज को डाउनलोड और अपने node_modules फोल्डर में इंस्टॉल करने के लिए।

यह पैकेज को इंस्टॉल करेगा और स्वचालित रूप से इसे आपके package.json फ़ाइल में डिपेंडेंसी के रूप में सेव करेगा।

तो अगर हम गल्प को अपने पैकेज में इंस्टॉल करना चाहते हैं, तो हम टाइप करेंगे: npm install gulp

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

अब, अगर आप अपनी package.json फ़ाइल खोलते हैं, तो आप नीचे देखेंगे कि गल्प डिपेंडेंसी के रूप में जोड़ा गया है:

"dependencies": { "gulp": "^3.9.1" }

डिपेंडेंसी की यह सूची बढ़ेगी जैसे-जैसे आप अतिरिक्त npm पैकेज इंस्टॉल करेंगे।

गल्प के लिए आवश्यक अन्य पैकेज

प्रारंभ में हम गल्प का उपयोग SCSS/CSS और JS फाइलों को कंपाइल करने जैसे कार्यों को चलाने के लिए करना चाहते थे। इसे पूरा करने के लिए, हम निम्नलिखित पैकेज का उपयोग करेंगे:

• gulp-sass — आपकी सैस फाइलों को CSS में कंपाइल करता है
• gulp-cssnano — आपकी CSS फाइलों को मिनीफाई करता है
• gulp-concat — एकाधिक JS फाइलों को एक बड़ी फ़ाइल में जोड़ता (कॉन्कैटनेट करता) है
• gulp-uglify — आपकी JS फाइलों को मिनीफाई करता है

बस पहले की तरह, इन लाइनों को एक-एक करके टाइप करके प्रत्येक पैकेज को इंस्टॉल करें। अगली लाइन पर जाने से पहले प्रत्येक के इंस्टॉल होने तक कुछ सेकंड प्रतीक्षा करें।

npm install gulp-sass npm install gulp-cssnano npm install gulp-concat npm install gulp-uglify 

गल्प-सीएलआई बनाम ग्लोबल गल्प

अतीत में, अपनी कमांड लाइन से "गल्प" चलाने में सक्षम होने के लिए, आपको अपने स्थानीय कंप्यूटर पर गल्प को ग्लोबली इंस्टॉल करना होता था, "npm install --global gulp" कमांड का उपयोग करके।

हालांकि गल्प का एक सिंगल ग्लोबल वर्जन होने से समस्याएं हो सकती थीं यदि आपके कई प्रोजेक्ट थे जिनके लिए गल्प के अलग-अलग वर्जन की आवश्यकता थी।

वर्तमान सहमति गल्प के बजाय एक अलग पैकेज, गल्प-सीएलआई को ग्लोबली इंस्टॉल करने की सिफारिश करती है।

यह आपको अभी भी "गल्प" कमांड चलाने की अनुमति देगा, लेकिन आप अपने विभिन्न प्रोजेक्ट्स में गल्प के विभिन्न वर्जन का उपयोग करने में सक्षम होंगे।

उसके लिए कोड यहाँ है:

npm install --global gulp-cli

अगर आप रुचि रखते हैं तो आप इस ट्रीहाउस थ्रेड पर अधिक संदर्भ पढ़ सकते हैं।

ठीक है, एक बार आपके सभी पैकेज इंस्टॉल हो जाने के बाद, आपके पास आवश्यक सभी उपकरण हैं। आइए अपने प्रोजेक्ट फाइल्स सेटअप करने पर आगे बढ़ते हैं!

अपनी फ़ाइल संरचना सेटअप करें

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

यह बुनियादी विधि आपको सभी चलते हुए भागों की बुनियादी कार्यक्षमता को समझने में मदद करेगी। फिर आप भविष्य में अपनी पसंद के अनुसार सेटअप को बदल सकते हैं!

यहाँ प्रोजेक्ट ट्री कैसा दिखेगा:

• रूट प्रोजेक्ट फोल्डर
  • index.html
  • gulpfile.js
  • package.json
  • node_modules (फोल्डर)
  • app (फोल्डर)
    • script.js
    • style.scss
  • dist (फोल्डर)

हम पहले ही package.json फ़ाइल और node_modules फोल्डर पर जा चुके हैं। और index.html फ़ाइल होगी, निश्चित रूप से, आपकी मुख्य वेबसाइट फ़ाइल।

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

लेकिन अभी मैं दो फोल्डर्स, app और dist का उल्लेख करना चाहता हूं, क्योंकि वे गल्प वर्कफ़्लो के लिए महत्वपूर्ण हैं।

App और dist फोल्डर

app फोल्डर में आपकी बेसिक जावास्क्रिप्ट फ़ाइल (script.js) और आपकी बेसिक SCSS फ़ाइल (style.scss) है। वे फाइलें हैं जहां आप अपना सारा JS और CSS कोड लिखेंगे।

dist फोल्डर केवल गल्प द्वारा प्रोसेस किए जाने के बाद अंतिम कंपाइल्ड JS और CSS फाइलों को स्टोर करने के लिए मौजूद है। आपको dist फाइलों में कोई बदलाव नहीं करना चाहिए, केवल app फाइलों में। लेकिन dist में ये फाइलें वही हैं जो index.html में लोड होंगी, चूंकि हम वेबसाइट में कंपाइल्ड फाइलों का उपयोग करना चाहते हैं।

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

अब आइए इस ट्यूटोरियल के मुख्य भाग पर चलते हैं, गल्प को कॉन्फ़िगर करना!

अपना गल्पफाइल बनाएं और कॉन्फ़िगर करें

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

1. अपने इंस्टॉल किए गए पैकेज को Node मॉड्यूल के रूप में आरंभ करें।
2. गल्प टास्क बनाएं और चलाएं।

पैकेज आरंभ करें

आपके प्रोजेक्ट में जोड़े गए npm पैकेज की सभी सुविधाओं का लाभ उठाने के लिए, आपको उन्हें Node में मॉड्यूल के रूप में निर्यात करना होगा। (इसलिए फोल्डर का नाम "node_modules")

अपने गल्पफाइल के शीर्ष पर, मॉड्यूल को इस तरह जोड़ें:

var gulp = require('gulp'); var cssnano = require('gulp-cssnano'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify');

अब जब पैकेज जोड़ दिए गए हैं, तो आप अपने गल्पफाइल स्क्रिप्ट में उनके फ़ंक्शन और ऑब्जेक्ट का उपयोग कर सकते हैं। आप Node.js का हिस्सा कुछ बिल्ट-इन फ़ंक्शन का भी उपयोग करेंगे।

अपने गल्प टास्क बनाएं

गल्प टास्क बनाने के लिए निम्न कोड का उपयोग किया जाता है:

gulp.task('[फ़ंक्शन नाम]', function(){ // यहाँ सामान करें }

यह आपको कमांड लाइन में gulp [फ़ंक्शन नाम] टाइप करके गल्प टास्क चलाने की अनुमति देता है। यह महत्वपूर्ण है क्योंकि आप तब उस नामित फ़ंक्शन को अन्य गल्प टास्क से चला सकते हैं।

विशेष रूप से, हम कई अलग-अलग गल्प टास्क बना रहे हैं, जो *सभी* डिफ़ॉल्ट गल्प टास्क चलाने पर चलेंगे।

मुख्य फ़ंक्शन जिनका हम उपयोग करेंगे वे हैं:

• .task() — जैसा कि ऊपर बताया गया है, एक टास्क बनाता है
• .src() — पहचानता है कि आप किसी विशेष टास्क में किन फाइलों को कंपाइल करेंगे
• .pipe() — गल्प द्वारा उपयोग किए जा रहे Node स्ट्रीम में एक फ़ंक्शन जोड़ता है; आप एक ही टास्क में कई फ़ंक्शन पाइप कर सकते हैं (इस विषय पर florian.ec पर एक उत्कृष्ट लेख पढ़ें)
• .dest() — परिणामी फ़ाइल को एक विशिष्ट स्थान पर लिखता है
• .watch() — परिवर्तनों का पता लगाने के लिए फ़ाइलों की पहचान करता है

अगर आप उत्सुक हैं, तो आप गल्प डॉक्यूमेंटेशन पर यहाँ और पढ़ सकते हैं।

सब तैयार? अब आइए काम पर लग जाएं (मुलान संगीत बजाएं) और उन टास्क को लिखें!

ये वे टास्क हैं जिन्हें हम गल्प से चलाना चाहते हैं:

• SCSS को CSS फ़ाइल में कंपाइल करने और मिनीफाई करने के लिए सैस टास्क
• JS फाइलों को जोड़ने और मिनीफाई/अग्लीफाई करने के लिए JS टास्क
• SCSS या JS फाइलों में परिवर्तन का पता लगाने और टास्क को पुन: चलाने के लिए वॉच टास्क
• डिफ़ॉल्ट टास्क जब आप कमांड लाइन में gulp टाइप करते हैं तो सभी आवश्यक टास्क चलाने के लिए

सैस टास्क

सैस टास्क के लिए, पहले हम गल्प का उपयोग करके टास्क बनाएंगे और इसे "सैस" नाम देंगे।

फिर हम प्रत्येक घटक को जोड़ेंगे जो टास्क चलाएगा। पहले हम src() का उपयोग करके स्रोत को app/scss/style.scss फ़ाइल के रूप में नामित करेंगे। फिर हम अतिरिक्त फ़ंक्शन पाइप करेंगे।

पहला sass() फ़ंक्शन चलाता है (gulp-sass मॉड्यूल का उपयोग करके जिसे हमने गल्पफाइल के शीर्ष पर "सैस" कहा था)। यह स्वचालित रूप से CSS फ़ाइल को SCSS फ़ाइल के समान नाम से सेव करेगा, इसलिए हमारी style.css होगी।

दूसरा cssnano() के साथ CSS फ़ाइल को मिनीफाई करता है। और अंतिम परिणामी CSS फ़ाइल को dist/css फोल्डर में रखता है।

उस सब के लिए कोड यहाँ है:

gulp.task('sass', function(){ return gulp.src('app/style.scss') .pipe(sass()) .pipe(cssnano()) .pipe(gulp.dest('dist/css')); });

परीक्षण के लिए, मैंने style.scss फ़ाइल में कुछ फिलर SCSS डाला:

div { display: block; &.content { position: relative; } } .red { color: red; }

आप कमांड लाइन में gulp और टास्क का नाम टाइप करके प्रत्येक व्यक्तिगत गल्प टास्क चला सकते हैं। तो सैस टास्क का परीक्षण करने के लिए, मैंने gulp sass टाइप किया ताकि यह जांच सकूं कि यह बिना त्रुटियों के काम करता है और मिनीफाइड dist/style.css फ़ाइल जनरेट करता है।

अगर सब कुछ सही ढंग से काम करता है, तो आपको अपनी कमांड लाइन में ऐसा मैसेजिंग दिखाई देना चाहिए:

[15:04:53] Starting 'sass'... [15:04:53] Finished 'sass' after 121 ms

dist फोल्डर में जांच करने पर पता चलता है कि वास्तव में एक style.css फ़ाइल है, और इसे खोलने पर सही ढंग से मिनीफाइड CSS दिखाई देता है:

div{display:block}div.content{position:relative}.red{color:red}

ठीक है, हमारा सैस टास्क अब हो गया। जावास्क्रिप्ट पर चलते हैं!

JS टास्क

जावास्क्रिप्ट गल्प टास्क सैस टास्क के समान है, लेकिन इसमें कुछ अलग तत्व हैं।

पहले हम टास्क बनाएंगे और इसे "js" कहेंगे, फिर हम स्रोत फ़ाइलों की पहचान करेंगे। src() फ़ंक्शन में, आप कुछ अलग तरीकों से एकाधिक फ़ाइलों की पहचान कर सकते हैं।

एक तरीका है वाइल्डकार्ड (*) का उपयोग करके गल्प को *.js एक्सटेंशन वाली सभी फ़ाइलों का उपयोग करने के लिए कहना:

gulp.src('app/*.js')

हालांकि यह फाइलों को वर्णानुक्रम में कंपाइल करेगा, जो संभावित रूप से त्रुटियों का कारण बन सकता है यदि आप उन अन्य स्क्रिप्ट फ़ाइलों से पहले उन स्क्रिप्ट को लोड करते हैं जो अन्य स्क्रिप्ट पर निर्भर हैं।

यदि आपके पास बहुत अधिक स्क्रिप्ट फ़ाइलें नहीं हैं तो आप मैन्युअल रूप से प्रत्येक JS फ़ाइल को नामित करके क्रम को नियंत्रित कर सकते हैं। src() फ़ंक्शन पैरामीटर के रूप में मानों की एक सरणी ले सकता है, वर्गाकार कोष्ठक का उपयोग करके:

gulp.src(['app/script.js', 'app/script2.js'])

यदि आपके पास बहुत सारी JS फ़ाइलें हैं, तो आप यह सुनिश्चित कर सकते हैं कि आप डिपेंडेंसी को पहले लोड करें उन्हें एक अलग सबफोल्डर में रखकर, जैसे "app/js/plugins"। फिर अन्य JS फ़ाइलों को पैरेंट "app/js" फोल्डर में रखें।

फिर आप सभी लाइब्रेरी (लाइब्रेरी) स्क्रिप्ट लोड करने के लिए वाइल्डकार्ड नोटेशन का उपयोग कर सकते हैं, उसके बाद नियमित स्क्रिप्ट:

gulp.src(['app/js/lib/*.js', 'app/js/script/*.js'])

आपका दृष्टिकोण आपके JS फ़ाइलों की संख्या और प्रकारों के आधार पर भिन्न होगा।

एक बार जब आप अपनी स्रोत फ़ाइलें सेट कर लेते हैं, तो आप शेष फ़ंक्शन पाइप करेंगे। पहला फाइलों को एक बड़ी JS फ़ाइल में जोड़ना है। concat() फ़ंक्शन को परिणामी फ़ाइल के नाम के साथ एक पैरामीटर की आवश्यकता होती है।

फिर आप JS फ़ाइल को अग्लीफाई करेंगे, और इसे गंतव्य स्थान पर सेव करेंगे।

जावास्क्रिप्ट टास्क के लिए पूरा कोड यहाँ है:

gulp.task('js', function(){ return gulp.src(['app/js/plugins/*.js', 'app/js/*.js']) .pipe(concat('all.js')) .pipe(uglify()) .pipe(gulp.dest('dist')); });

सैस टास्क की तरह, आप कमांड लाइन में gulp js टाइप करके परीक्षण कर सकते हैं कि JS टास्क काम करता है।

[14:38:31] Starting 'js'... [14:38:31] Finished 'js' after 36 ms

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

वॉच टास्क

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

हम दो वॉच फ़ंक्शन बनाएंगे, एक SCSS फाइलों को देखने के लिए और दूसरा JS फाइलों को देखने के लिए।

watch() फ़ंक्शन दो पैरामीटर लेता है: स्रोत स्थान, और फिर परिवर्तन का पता चलने पर चलाने के लिए टास्क।

सैस वॉच फ़ंक्शन app फोल्डर में किसी भी SCSS फ़ाइलों को देखेगा और फिर परिवर्तन का पता चलने पर सैस टास्क चलाएगा।

फ़ंक्शन इस तरह दिखेगा:

gulp.watch('app/*.scss', ['sass']);

जावास्क्रिप्ट वॉच फ़ंक्शन के लिए, हमें "ग्लोबिंग" नामक एक बहुत उपयोगी Node फीचर का लाभ उठाना होगा। ग्लोबिंग फोल्डर और सबफोल्डर के लिए एक तरह के वाइल्डकार्ड के रूप में "**" सिंबल का उपयोग करने को संदर्भित करता है। हमें JS फाइलों के लिए इसकी आवश्यकता है क्योंकि हमारे पास app/js फोल्डर में एक JS फ़ाइल है, और app/js/plugins फोल्डर में एक JS फ़ाइल है।

और यहाँ वह फ़ंक्शन कैसा दिखेगा:

gulp.watch('app/js/**/*.js', ['js']);

ग्लोब ("**") जिस तरह से काम करता है वह app/js फोल्डर में कहीं भी JS फ़ाइलों को ढूंढेगा। यह सीधे फोल्डर में या किसी भी बाद के चाइल्ड फोल्डर में देखेगा, जैसे plugins फोल्डर। ग्लोबिंग काम आता है ताकि आपको वॉच() फ़ंक्शन में प्रत्येक सबफोल्डर को अलग स्रोत के रूप में नामित न करना पड़े।

यहाँ पूरा वॉच टास्क है:

gulp.task('watch', function(){ gulp.watch('app/*.scss', ['sass']); gulp.watch('app/js/**/*.js', ['js']); });

हम लगभग हो चुके हैं! बनाने के लिए अंतिम टास्क डिफ़ॉल्ट गल्प टास्क है।

डिफ़ॉल्ट गल्प टास्क

डिफ़ॉल्ट गल्प टास्क वह है जिसे आप चलाना चाहते हैं जब आप कमांड लाइन में सिर्फ gulp टाइप करते हैं। जब आप टास्क बनाते हैं, तो आपको इसे "डिफ़ॉल्ट" कहना होगा ताकि गल्प पहचान सके कि वही आप चलाना चाहते हैं।

हम जो करना चाहते हैं वह है सैस और JS टास्क को एक बार चलाना, फिर वॉच टास्क चलाना ताकि फाइलें बदलने पर टास्क पुन: चलें।

gulp.task('default', ['sass', 'js', 'watch']);

आप अपने बिल्ड चलाने के लिए अन्य टास्क बना सकते हैं, बस "डिफ़ॉल्ट" नाम का पुन: उपयोग न करें। उदाहरण के लिए, मान लें कि आप डिफ़ॉल्ट रूप से अपनी CSS और JS फाइलों को अनमिनीफाइड छोड़ना चाहते हैं, लेकिन आप प्रोडक्शन के लिए उन्हें मिनीफाई करना चाहते हैं।

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

आपके index.html में रेफरेंस

एक बार जब आपकी गल्प प्रक्रिया काम करने लगती है, तो सुनिश्चित करें कि आपकी index.html फ़ाइल सभी सही CSS और JS फ़ाइलों को रेफरेंस करती है।

मेरे द्वारा दिए गए उदाहरणों के लिए, आप अपने <head> में dist/style.css का CSS रेफरेंस जोड़ना चाहेंगे:

<link rel="stylesheet" href="dist/style.css">

और अपने <body> में dist/all.js को रेफरेंस करने वाला एक स्क्रिप्ट टैग जोड़ें:

<script src="dist/all.js"></script>

समापन में

इसे पूरा करने के लिए बधाई! मुझे आशा है कि आपको यह बुनियादी गल्प ट्यूटोरियल उपयोगी लगा।

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

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

अंत में, आप इस ट्यूटोरियल के सभी कोड को मेरे गिटहब अकाउंट पर यहाँ देख सकते हैं।

अगर आपको यह ट्यूटोरियल पसंद आया तो कृपया इसे शेयर करने के लिए स्वतंत्र महसूस करें, और/या नीचे कमेंट में अपने विचार छोड़ें!