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

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

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

लेकिन गुलप सीखने के लिए एक निश्चित सीखने की अवस्था है।

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

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

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

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

तो गल्प के साथ क्या बड़ी बात है?

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

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

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

हम जो करेंगे उसकी त्वरित रूपरेखा

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

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

यदि आप उपरोक्त सभी शर्तों को पूरी तरह से नहीं समझते हैं, तो चिंता न करें। मैं एक-एक कदम सब कुछ समझाता हूँ।

अब चलिए शुरू करते हैं!

अपना परिवेश सेट करें

नोड.जेएस

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

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

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

npm क्या है, आप पूछें?

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

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

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

पैकेज को स्थापित करने के लिए यहां मूल सिंटैक्स दिया गया है:

npm install [Package Name]

बहुत सीधा लगता है, है ना?

नोड_मॉड्यूल फ़ोल्डर

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

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

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

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

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

इसलिए जब आप अपने नोड_मॉड्यूल फ़ोल्डर में एक प्लगइन स्थापित करते हैं, तो वह प्लगइन अतिरिक्त पैकेज स्थापित करेगा जो *इसे* अपने स्वयं के नोड_मॉड्यूल फ़ोल्डर में चाहिए।

और इसी तरह और भी बहुत कुछ जब तक कि आपके पास वज़ू से फ़ोल्डर्स नेस्टेड न हो जाएं।

इस बिंदु पर आपको नोड_मॉड्यूल्स फ़ोल्डर में गड़बड़ करने के बारे में बहुत अधिक चिंता करने की आवश्यकता नहीं है- बस संक्षेप में बताना चाहते हैं कि उस पागल फ़ोल्डर में क्या चल रहा है 🙂

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

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

यदि आपको किसी कारणवश सब कुछ पुनः स्थापित करना पड़े तो यह महत्वपूर्ण है।

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

यह ऐसा करने का प्रबंधन कैसे करता है?

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

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

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

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

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

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

जब आप कर लेंगे, तो 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 [Package Name] . टाइप करने के बारे में बात की थी

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

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

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

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

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

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

जैसे-जैसे आप अतिरिक्त npm पैकेज स्थापित करेंगे, निर्भरता की यह सूची बढ़ती जाएगी।

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

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

• gulp-sass — आपकी Sass फ़ाइलों को CSS में संकलित करता है
• gulp-cssnano — आपकी CSS फाइलों को छोटा करता है
• gulp-concat — एक से अधिक JS फ़ाइलों को एक बड़ी फ़ाइल में संयोजित (संयोजित) करता है
• गल्प-बदसूरत — आपकी जेएस फाइलों को छोटा करता है

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

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

गल्प-क्ली बनाम ग्लोबल गल्प

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

हालाँकि, यदि आपके पास कई प्रोजेक्ट हैं, तो गल्प का एक ही वैश्विक संस्करण होने से समस्याएँ हो सकती हैं, जिनमें सभी के लिए गुलप के विभिन्न संस्करणों की आवश्यकता होती है।

वर्तमान सर्वसम्मति गुलप के बजाय विश्व स्तर पर एक अलग पैकेज, गुलप-क्ली को स्थापित करने की सिफारिश करती है।

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

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

npm install --global gulp-cli

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

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

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

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

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

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

• रूट प्रोजेक्ट फोल्डर
  • index.html
  • gulpfile.js
  • package.json
  • नोड_मॉड्यूल (फ़ोल्डर)
  • ऐप (फ़ोल्डर)
  • script.js
  • style.scss
  • जिला (फ़ोल्डर)

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

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

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

ऐप और डिस्ट फोल्डर

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

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

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

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

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

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

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

पैकेज प्रारंभ करें

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

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

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 Name]', function(){
   // Do stuff here
}

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

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

हम जिन मुख्य कार्यों का उपयोग करेंगे उनमें से कुछ हैं:

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

यदि आप उत्सुक हैं, तो आप यहां गल्प दस्तावेज़ीकरण के बारे में अधिक पढ़ सकते हैं।

सब तैयार? अब चलिए व्यवसाय में उतरते हैं (क्यू मूलन संगीत) और उन कार्यों को लिखें!

ये निम्नलिखित कार्य हैं जिन्हें हम गुलप को चलाना चाहते हैं:

• एससीएसएस को एक सीएसएस फ़ाइल में संकलित करने और छोटा करने के लिए एसएएस कार्य
• जेएस फाइलों को जोड़ने और छोटा करने/बदनाम करने का काम करता है
• एससीएसएस या जेएस फाइलें कब बदली जाती हैं, इसका पता लगाने के लिए कार्य देखें, और कार्यों को फिर से चलाएं
• आपके द्वारा gulp टाइप करने पर सभी आवश्यक कार्यों को चलाने के लिए डिफ़ॉल्ट कार्य कमांड लाइन में

सास कार्य

Sass टास्क के लिए, पहले हम टास्क () का उपयोग करके गुलप में टास्क बनाना चाहते हैं, और हम इसे "sass" नाम देंगे।

फिर हम प्रत्येक घटक में जोड़ते हैं कि कार्य चलेगा। सबसे पहले हम यह निर्दिष्ट करेंगे कि src() का उपयोग करके स्रोत ऐप/एससीएसएस/शैली.एससीएसएस फ़ाइल होगी। फिर हम अतिरिक्त कार्यों में शामिल होंगे।

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

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

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

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

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

div {
    display: block;

    &.content {
        position: relative;
    }
}

.red {
    color: red;
}

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

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

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

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

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

ठीक है, हमारा Sass कार्य अब पूरा हो गया है। जावास्क्रिप्ट पर!

जेएस कार्य

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

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

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

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

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

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

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

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

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

gulp.src(['app/js/lib/*.js', 'app/js/script/*.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'));
});

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

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

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

कार्य देखें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

आपके index.html में संदर्भ

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

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

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

और dist/all.js . के संदर्भ में एक स्क्रिप्ट टैग जोड़ें आपके <शरीर>:

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

समापन होने पर

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

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

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

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

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