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

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

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

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

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

गुलप क्या है और यह क्या करता है?

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

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

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

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

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

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

आइए आपके कंप्यूटर पर गुलप को स्थापित करने और स्थापित करने के लिए आगे बढ़ते हैं।

गुलप 4 कैसे स्थापित करें

इससे पहले कि आप गल्प चला सकें, आपको कुछ चीजें स्थापित करनी होंगी:

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

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

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

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

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

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

अब आपके पास प्रोजेक्ट फ़ाइलें सेट अप होनी चाहिए, और सभी 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'...

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

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

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

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

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

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

अब जब हमारे पास गल्प चल रहा है, तो आइए देखें कि गुलप कैसे काम करता है।

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

यहाँ गल्पफाइल के प्रत्येक अनुभाग की गहराई से व्याख्या की गई है, और वे क्या करते हैं:

चरण 1:npm मॉड्यूल प्रारंभ करें

gulpfile.js में सबसे ऊपर , हमारे पास स्थिरांक का एक पूरा समूह है जो require() का उपयोग करके हमारे द्वारा पहले स्थापित किए गए npm संकुल को आयात करता है। समारोह।

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

गल्प पैकेज:

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

सीएसएस पैकेज:

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

जेएस पैकेज:

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

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

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

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

अब जब हमारे मॉड्यूल जुड़ गए हैं, तो चलिए उन्हें काम करते हैं!

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

गुलप में एक "कार्य" मूल रूप से एक ऐसा कार्य है जो एक विशिष्ट उद्देश्य को पूरा करता है।

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

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

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

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

सास कार्य

हमारे Sass कार्य के लिए यह कोड है:

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

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

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

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

इसके द्वारा चलाए जा रहे कार्य हैं:

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

जेएस कार्य

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

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

हमारा JavaScript कार्य, जिसे jsTask() . कहा जाता है , कई कार्य भी चला रहा है:

• src() JS फ़ाइलों को files.jsPath . से लोड करने के लिए ।
• 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 फ़ाइल में परिवर्तन किए हैं और आप सर्वर पर पुन:नियोजित करते हैं, तो आप लोगों को उन फ़ाइलों को फिर से डाउनलोड करने के लिए बाध्य करना चाहते हैं।

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

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

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

गल्प wकार्य संलग्न करें

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

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

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

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

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

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

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

अब जब हमने अपने उपयोगिता कार्यों को सेट कर लिया है, तो हमें अपना मुख्य गल्प कार्य सेट करना होगा।

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

यह मुख्य गल्प टास्क है, जो gulp . टाइप करने पर अपने आप चलेगा कमांड लाइन पर।

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

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

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

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

आप यह भी देखेंगे कि हम उन सभी कार्यों को series() . के अंदर डाल रहे हैं समारोह।

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

गुलप 4 में बदलाव

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

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

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

गल्प टीम exports . का उपयोग करने की अनुशंसा करती है tasks() . के बजाय :

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

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

अगर आप गल्प 3 का उपयोग कर रहे हैं और आप चाहते हैं कि गल्प 4 के साथ काम करने वाली ख़तरनाक चीज़ मिल जाए, तो आप भाग्य में हैं!

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

गल्प 4 ने कार्यों को चलाने के लिए दो नए कार्यों का परिचय दिया:series() और parallel() . यह आपको कई कार्यों को एक साथ या एक के बाद एक चलाने का विकल्प देता है।

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

कुछ इस तरह:

AssertionError [ERR_ASSERTION]: Task function must be specified

यहां बताया गया है कि आप इसे कैसे जल्दी से ठीक कर सकते हैं:

(पुराने) गल्प 3 सिंटैक्स में कार्य

गल्प 3 में, हो सकता है कि आपने कार्यों को इस तरह से चलाया हो:

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

गुलप 4 सिंटैक्स में कार्य

उन कार्यों को एक श्रृंखला () फ़ंक्शन में इस तरह रखें:

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

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

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

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

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

यहां GitHub रिपॉजिटरी देखें।