शुरुआती लोगों के लिए Gulp 4 ट्यूटोरियल (Sass और JS वर्कफ़्लो)

Gulp 4 पर यह ट्यूटोरियल चरण दर चरण समझाएगा कि Gulp को अपने वर्कफ़्लो में Sass और JavaScript फ़ाइलों को कंपाइल करने के लिए कैसे सेटअप करें।

यदि आपने अभी तक Gulp का उपयोग नहीं किया है, तो मैं अत्यधिक अनुशंसा करता हूं कि आप इसे देखें! आप Gulp का उपयोग बहुत सारे उपयोगी कार्यों को चलाने के लिए कर सकते हैं, जैसे अपनी Sass फ़ाइलों को CSS में कंपाइल करना, JavaScript फ़ाइलों को प्रोसेस करना, और अपनी फ़ाइलों को ऑप्टिमाइज़ करना।

यहां Gulp को इंस्टॉल और चलाने के बुनियादी चरण दिए गए हैं, जिन्हें हम इस ट्यूटोरियल में कवर करेंगे:

1. कमांड लाइन पर npm install gulp-cli -g चलाकर gulp-cli इंस्टॉल करें।
2. npm install gulp चलाकर Gulp इंस्टॉल करें।
3. अपने Gulp वर्कफ़्लो के लिए अन्य npm पैकेज इंस्टॉल करें।
4. अपने प्रोजेक्ट रूट में gulpfile.js फ़ाइल बनाएं।
5. अपने npm पैकेज को अपने gulpfile में मॉड्यूल के रूप में इम्पोर्ट करें।
6. अपने SCSS/JS फ़ाइलों को कंपाइल करने और वॉच टास्क चलाने के लिए अपने टास्क्स को gulpfile में जोड़ें।
7. gulp कमांड चलाकर अपने सभी टास्क्स चलाएं।

Gulp क्या है और यह क्या करता है?

Gulp एक टूल है जो आपके वेब डेवलपमेंट वर्कफ़्लो में आपके लिए विभिन्न कार्य चलाएगा। इसे बंडलर, बिल्ड टूल, या टास्क रनर कहा जा सकता है। समान टूल्स Webpack और Grunt हैं (हालांकि Grunt तेजी से अप्रचलित हो रहा है)।

यहां हम Gulp से क्या करवाने जा रहे हैं:

1. हमारी Sass फ़ाइलों को CSS में कंपाइल करें
2. हमारे CSS में वेंडर प्रीफिक्स जोड़ें
3. हमारी अंतिम CSS फ़ाइल को मिनीफाई करें
4. हमारी JS फ़ाइलों को कंकैटनेट (यानी संयोजित) करें
5. हमारी अंतिम JS फ़ाइल को अगलिफाई करें
6. अंतिम CSS/JS फ़ाइलों को हमारे /dist फ़ोल्डर में ले जाएं।

बहुत बढ़िया, है ना?!

इस तरह यह काम करता है, आपकी सभी सेटिंग्स और टास्क्स एक gulpfile.js फ़ाइल में संग्रहीत होती हैं। और आप कमांड लाइन पर Gulp चलाते हैं।

इसका बढ़िया हिस्सा यह है कि एक बार जब आपका gulpfile पूरी तरह सेट हो जाता है, तो आप इसे अन्य प्रोजेक्ट्स के लिए आसानी से पुनः उपयोग कर सकते हैं। तो यह एक बहुत बड़ा समय बचाने वाला है!

आइए अपने कंप्यूटर पर Gulp को इंस्टॉल और सेटअप करने पर आगे बढ़ें।

Gulp 4 कैसे इंस्टॉल करें

Gulp चलाने से पहले, आपको कुछ चीजें इंस्टॉल करने की आवश्यकता होगी:

• यदि आपके पास अभी तक नहीं है तो Node.js इंस्टॉल करें।
• npm install --global gulp-cli चलाकर Gulp कमांड लाइन उपयोगिता इंस्टॉल करें।

एक बार Gulp काम करने लगे, तो एक डेमो प्रोजेक्ट देखें जिसे मैंने Gulp का उपयोग करके बनाया है!

यह एक फ्रंट-एंड बॉयलरप्लेट प्रोजेक्ट है जो किसी भी सरल फ्रंट-एंड वेबसाइट के साथ शुरुआत करने का एक त्वरित तरीका है।

(इस ट्यूटोरियल के बाकी हिस्से में भी बहुत सारे कोड स्निपेट्स हैं, इसलिए आप उनको भी देख सकते हैं!)

फ्रंट-एंड बॉयलरप्लेट प्रोजेक्ट को सेटअप करने के लिए:

• इस प्रोजेक्ट के Git रेपो को अपने कंप्यूटर पर क्लोन या डाउनलोड करें।
• प्रोजेक्ट खोलें, और रूट प्रोजेक्ट फ़ोल्डर में, अपनी कमांड लाइन पर जाएं और npm install चलाएं। यह package.json फ़ाइल में सूचीबद्ध npm पैकेज इंस्टॉल करेगा, विशेष रूप से Gulp 4।

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

चूंकि रेपो से फ़ाइलें जाने के लिए तैयार हैं, यदि आप कमांड लाइन में gulp टाइप करते हैं, तो आपको इस तरह का आउटपुट देखना चाहिए:

> gulp [22:29:48] Using gulpfile ~\Documents\GitHub\frontend-boilerplate\gulpfile.js [22:29:48] Starting 'default'... [22:29:48] Starting 'scssTask'... [22:29:48] Starting 'cacheBustTask'... [22:29:48] Finished 'cacheBustTask' after 39 ms [22:29:48] Starting 'jsTask'... [22:29:48] Finished 'jsTask' after 340 ms [22:29:48] Finished 'scssTask' after 347 ms [22:29:48] Starting 'watchTask'... 

और आपने Gulp चला लिया!

जब आप Gulp चलाते हैं तो प्रोजेक्ट में क्या हो रहा है?

ठीक है, आपने प्रोजेक्ट को सफलतापूर्वक काम कर लिया है! अब आइए इस बात पर अधिक विस्तार से जाएं कि प्रोजेक्ट में क्या है और यह कैसे काम करता है।

सबसे पहले, यहां हमारे प्रोजेक्ट की फ़ाइल संरचना का त्वरित विवरण है:

• index.html — आपकी मुख्य HTML फ़ाइल
• package.json — npm install चलाने पर इंस्टॉल किए जाने वाले सभी npm पैकेज शामिल हैं।
• gulpfile.js — कॉन्फ़िगरेशन शामिल है और सभी Gulp टास्क चलाता है
• /app — वर्किंग फ़ोल्डर, आप यहां SCSS/JS फ़ाइलें संपादित करेंगे
• /dist — Gulp यहां फ़ाइलें आउटपुट करेगा, इन फ़ाइलों को संपादित न करें

आपके वर्कफ़्लो में, आप HTML, SCSS, और JS फ़ाइलें संपादित करेंगे। Gulp तब किसी भी परिवर्तन का पता लगाएगा और सब कुछ कंपाइल करेगा। फिर आप अपने अंतिम CSS/JS फ़ाइलों को अपने index.html फ़ाइल में /dist फ़ोल्डर से लोड करेंगे।

अब जब हमारे पास Gulp चल रहा है, आइए इस पर करीब से नज़र डालें कि Gulp कैसे काम करता है।

gulpfile.js में वास्तव में क्या है?

यहां gulpfile के प्रत्येक अनुभाग का गहन विवरण दिया गया है, और वे क्या करते हैं:

चरण 1: npm मॉड्यूल इनिशियलाइज़ करें

gulpfile.js के बहुत शीर्ष पर, हमारे पास कई स्थिरांक हैं जो require() फ़ंक्शन का उपयोग करके पहले इंस्टॉल किए गए npm पैकेज को इम्पोर्ट करते हैं।

यहां हमारे पैकेज क्या करते हैं:

Gulp पैकेज:

• gulp — gulpfile.js में सब कुछ चलाता है। हम केवल विशिष्ट gulp फ़ंक्शन निर्यात कर रहे हैं जिनका हम उपयोग करेंगे, जैसे src, dest, watch, और अन्य। यह हमें उन फ़ंक्शन को सीधे gulp के बिना कॉल करने की अनुमति देता है, उदाहरण के लिए हम केवल src() टाइप कर सकते हैं बजाय gulp.src() के।

CSS पैकेज:

• gulp-sourcemaps — ब्राउज़र डेव टूल्स में CSS स्टाइल को मूल SCSS फ़ाइल पर वापस मैप करता है
• gulp-sass — SCSS को CSS में कंपाइल करता है
• gulp-postcss — ऑटोप्रीफिक्सर और cssnano चलाता है (नीचे देखें)
• autoprefixer — CSS में वेंडर प्रीफिक्स जोड़ता है
• cssnano — CSS को मिनीफाई करता है

JS पैकेज:

• gulp-concat — कई JS फ़ाइलों को एक फ़ाइल में संयोजित करता है
• gulp-uglify — JS को मिनीफाई करता है

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

स्ट्रिंग रिप्लेस पैकेज:

• gulp-replace — कैश बस्ट के लिए CSS/JS रेफरेंस में एक स्ट्रिंग पैरामीटर जोड़ें

अब जब हमारे मॉड्यूल जुड़ गए हैं, आइए उन्हें काम पर लगाएं!

चरण 2: मॉड्यूल का उपयोग करके अपने Gulp टास्क चलाएं

Gulp में एक "टास्क" मूल रूप से एक फ़ंक्शन है जो एक विशिष्ट उद्देश्य करता है।

हम अपने SCSS और JS फ़ाइलों को कंपाइल करने के लिए कुछ यूटिलिटी टास्क बना रहे हैं, और उन फ़ाइलों को किसी भी परिवर्तन के लिए वॉच भी कर रहे हैं। फिर उन यूटिलिटी टास्क को हमारे डिफ़ॉल्ट Gulp टास्क में चलाया जाएगा जब हम कमांड लाइन पर gulp टाइप करेंगे।

फ़ाइल पाथ के लिए स्थिरांक बनाना

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

यह कोड scssPath और jsPath स्थिरांक बनाता है जिनका उपयोग हम Gulp को यह बताने के लिए करेंगे कि फ़ाइलें कहां मिलती हैं।

Sass टास्क

यहां हमारे Sass टास्क का कोड है:

function scssTask(){ return src(files.scssPath) .pipe(sourcemaps.init()) .pipe(sass()) .pipe(postcss([ autoprefixer(), cssnano() ])) .pipe(sourcemaps.write('.')) .pipe(dest('dist') ); } 

हमारा Sass टास्क, जिसे scssTask() कहा जाता है, कई चीजें कर रहा है। Gulp में, आप pipe() Gulp फ़ंक्शन का उपयोग करके पहले फ़ंक्शन के बाद कई फ़ंक्शन को चेन कर सकते हैं।

हमारे टास्क में, Gulp पहले src() चला रहा है SCSS फ़ाइलों के सोर्स डायरेक्टरी को लोड करने के लिए। यह हमारे द्वारा पहले बनाए गए स्थिरांक, files.scssPath का उपयोग कर रहा है।

फिर src() के बाद हम बाकी सब कुछ बिल्ड प्रोसेस में पाइप कर रहे हैं। आप इसके बारे में एक मौजूदा पाइप पर अधिक से अधिक पाइप सेक्शन जोड़ने की तरह सोच सकते हैं।

यह जिन फ़ंक्शन को चला रहा है वे हैं:

• sourcemaps.init() — sourcemaps को src() के बाद सबसे पहले जोड़ने की आवश्यकता है
• sass() सभी SCSS फ़ाइलों को एक CSS फ़ाइल में कंपाइल करने का काम करता है
• postcss() दो अन्य प्लगइन्स चलाता है:
  • autoprefixer() CSS में वेंडर प्रीफिक्स जोड़ने के लिए
  • cssnano() CSS फ़ाइल को मिनीफाई करने के लिए
• sourcemaps.write() उसी डायरेक्टरी में sourcemaps फ़ाइल बनाता है।
• dest() Gulp को अंतिम CSS फ़ाइल और CSS sourcemaps फ़ाइल को /dist फ़ोल्डर में रखने के लिए कहता है।

JS टास्क

यहां JS फ़ाइलों को कंपाइल करने के लिए हमारे टास्क का कोड है:

function jsTask(){ return src([files.jsPath]) .pipe(concat('all.js')) .pipe(uglify()) .pipe(dest('dist') ); } 

हमारा JavaScript टास्क, जिसे jsTask() कहा जाता है, कई फ़ंक्शन भी चला रहा है:

• src() files.jsPath से JS फ़ाइलें लोड करने के लिए।
• concat() सभी JS फ़ाइलों को एक JS फ़ाइल में संयोजित करने के लिए।
• uglify() JS फ़ाइल को अगलिफाई/मिनीफाई करने के लिए।
• dest() अंतिम JS फ़ाइल को /dist फ़ोल्डर में ले जाने के लिए।

कैश बस्ट टास्क

कैश बस्ट टास्क के लिए कोड यहां है:

var cbString = new Date().getTime(); function cacheBustTask(){ return src(['index.html']) .pipe(replace(/cb=\d+/, 'cb=' + cbString)) .pipe(dest('.')); } 

index.html फ़ाइल में, मैं CSS और JS फ़ाइलों के लिए निम्नलिखित रेफरेंस का उपयोग कर रहा हूं:

<link rel="stylesheet" href="dist/style.css?cb=123"> <script src="dist/all.js?cb=123"></script> 

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

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

फिर से डाउनलोड को मजबूर करने का एक तरीका है उन फ़ाइल रेफरेंस के अंत में एक छोटा क्वेरीस्ट्रिंग
?cb=123 जोड़ना। यदि ब्राउज़र पेज को रीलोड करता है और क्वेरीस्ट्रिंग पिछली बार से अलग है, तो यह फ़ाइल को रीफ्रेश करेगा।

मैं Gulp replace() फ़ंक्शन का उपयोग "cb=" और किसी भी संख्या वाले स्ट्रिंग्स को खोजने के लिए कर रहा हूं। और उस संख्या को 1970 से मिलीसेकंड में वर्तमान समय में परिवर्तित एक नई संख्या से बदल रहा हूं।

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

Gulp वॉच टास्क

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

यह बहुत अच्छा है क्योंकि तब आपको हर कोड परिवर्तन के बाद मैन्युअली gulp चलाते रहने की आवश्यकता नहीं है।

यहां हमारे Gulp वॉच टास्क का उदाहरण कोड है:

function watchTask(){ watch( [files.scssPath, files.jsPath], parallel(scssTask, jsTask) ); } 

watch() फ़ंक्शन तीन पैरामीटर लेता है, लेकिन हम केवल दो का उपयोग कर रहे हैं:

• ग्लोब्स, मतलब फ़ाइल पाथ स्ट्रिंग्स,
• विकल्प (उपयोग नहीं किया गया), और
• टास्क, मतलब हम कौन से टास्क चलाना चाहते हैं।

हम अपने वॉच टास्क को अपने scssPath और jsPath डायरेक्टरीज़ में फ़ाइलों को देखने के लिए कह रहे हैं। फिर यदि उनमें से किसी में भी कोई परिवर्तन किया जाता है, तो scssTask और jsTask टास्क को एक साथ चलाएं।

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

डिफ़ॉल्ट Gulp टास्क

यह मुख्य Gulp टास्क है, जो स्वचालित रूप से चलेगा यदि आप कमांड लाइन पर gulp टाइप करते हैं।

exports.default = series( parallel(scssTask, jsTask), watchTask); 

Gulp आपके gulpfile.js में default टास्क को स्वचालित रूप से खोजेगा जब आप gulp कमांड का उपयोग करेंगे। इसलिए इसे काम करने के लिए आपको डिफ़ॉल्ट टास्क को एक्सपोर्ट करना होगा।

हमारा डिफ़ॉल्ट टास्क निम्नलिखित करेगा:

• parallel() का उपयोग करके scssTask और jsTask को एक साथ चलाएं
• फिर watchTask चलाएं

आप यह भी देखेंगे कि हम उन सभी टास्क को series() फ़ंक्शन के अंदर रख रहे हैं।

यह Gulp 4 में टास्क को कैसे संभालता है, इसमें प्रमुख नए परिवर्तनों में से एक है - आपको सभी टास्क (यहां तक कि सिंगल वाले) को या तो series() या parallel() में लपेटना आवश्यक है।

Gulp 4 में परिवर्तन

यदि आप सब कुछ चलाने के लिए tasks() फ़ंक्शन का उपयोग कर रहे हैं, तो आपने देखा होगा कि अब अंतर है।

gulp.task() का उपयोग करके अपने सभी टास्क फ़ंक्शन को समाहित करने के बजाय, हम scssTask() और watchTask() जैसे वास्तविक फ़ंक्शन बना रहे हैं।

यह Gulp के टास्क बनाने के आधिकारिक दिशानिर्देशों का पालन करने के लिए है।

Gulp टीम tasks() के बजाय exports का उपयोग करने की सिफारिश करती है:

तो, जबकि वे अभी भी आपको task() फ़ंक्शन का उपयोग करने देते हैं, प्रत्येक टास्क के लिए JS फ़ंक्शन बनाना और फिर उन्हें एक्सपोर्ट करना अधिक वर्तमान है। यदि आप कर सकते हैं, तो मैं अपने सिंटैक्स को इसे प्रतिबिंबित करने के लिए अपडेट करने की सिफारिश करूंगा, क्योंकि संभव है कि Gulp भविष्य में task() को डिप्रिकेट कर दे।

Gulp 3 से माइग्रेट करने में समस्याएं?

यदि आप Gulp 3 का उपयोग कर रहे हैं और आप बस चाहते हैं कि यह Gulp 4 के साथ काम करे, तो आप भाग्यशाली हैं!

मुख्य ब्रेकिंग परिवर्तन इस बात में शामिल है कि आप टास्क कैसे चलाते हैं।

Gulp 4 टास्क चलाने के लिए दो नए फ़ंक्शन पेश करता है: series() और parallel()। यह आपको कई टास्क को समवर्ती रूप से, या एक के बाद एक चलाने का विकल्प देता है।

पहले, Gulp 3 में, आप बस एक सिंगल फ़ंक्शन या एक सरणी में कई फ़ंक्शन सूचीबद्ध कर सकते थे। हालांकि, Gulp 4 में, उन्हें series() या parallel() में लपेटे बिना ऐसा करने से अब त्रुटि होगी।

कुछ इस तरह:

AssertionError [ERR_ASSERTION]: Task function must be specified 

यहां बताया गया है कि आप सबसे छोटे संभव परिवर्तन से इसे कैसे त्वरित रूप से ठीक कर सकते हैं:

पुराने Gulp 3 सिंटैक्स में टास्क

Gulp 3 में, आप टास्क को इस तरह चला सकते थे:

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

Gulp 4 सिंटैक्स में टास्क

उन टास्क को series() फ़ंक्शन में इस तरह डालें:

gulp.task('default', gulp.series('sass', 'js', 'watch')); gulp.watch('app/scss/*.scss', gulp.series('sass')); 

और यह टास्क फ़ंक्शन त्रुटि को सबसे छोटे संभव परिवर्तन से ठीक कर देगा! 🙂

प्रोजेक्ट फ़ाइलें डाउनलोड

यहां मैंने जो भी कोड प्रदर्शित किया है, वह एक GitHub रेपो से है जो मेरे पास फ्रंट-एंड बॉयलरप्लेट के लिए है। यह किसी भी सरल फ्रंट-एंड वेबसाइट प्रोजेक्ट के लिए एक त्वरित स्टार्टर किट के रूप में है।

आप इसे देखने, कस्टमाइज़ करने, और अपने प्रोजेक्ट्स के लिए उपयोग करने के लिए स्वागत है!

GitHub रेपो यहां देखें।