गल्प 4 + ब्राउजरसिंक + सैस के लिए त्वरित सेटअप

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

हम HTML, Sass और JavaScript फ़ाइलों के साथ काम करेंगे, और इस फैंसी शमंसी वेबसाइट का निर्माण करेंगे!

Browsersync एक शक्तिशाली उपकरण है जो आपको वास्तविक समय में अपनी वेबसाइट का परीक्षण करने में सक्षम बनाता है। यह एक स्थानीय सर्वर को स्पिन करके और इसे आपके ब्राउज़र में सिंक करके काम करता है।

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

Browsersync का उपयोग करने से आपको तेजी से और अधिक कुशलता से कोड करने में मदद मिलेगी। यह एक अविश्वसनीय रूप से सहायक टूल है जिसका उपयोग किसी भी वेब डेवलपर को पता होना चाहिए।

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

प्रोजेक्ट सेट करना

इस ट्यूटोरियल के साथ कोड करना चाहते हैं? मैंने एक GitHub रेपो बनाया है जिसमें इस प्रोजेक्ट के लिए सभी स्टार्टर फ़ाइलें शामिल हैं।

या तो क्लोन करें या गिटहब रेपो डाउनलोड करें, और अपने पसंदीदा कोड संपादक में फ़ोल्डर खोलें (मुझे व्यक्तिगत रूप से वीएस कोड पसंद है)।

यहां परियोजना संरचना और हमारे पास किस प्रकार की फाइलें हैं:

[gulp-browsersync]
  |-- [app]
        |-- [js]
              |-- script.js
        |-- [scss]
              |-- style.scss
  |-- [dist]
  |-- [img]
  |-- gulpfile.js
  |-- index.html
  |-- package-lock.json
  |-- package.json
 

प्रोजेक्ट रूट में हमारे पास हमारा index.html है , package.json , package-lock.json , और gulpfile.js फ़ाइलें।

और हमारे पास कुछ फोल्डर हैं:app , जिला , और img ।

एप्लिकेशन . में फ़ोल्डर हमारे पास एक js है सबफ़ोल्डर, जिसमें script.js . है फ़ाइल।

और हमारे पास एक scss है style.scss . के साथ सबफ़ोल्डर फ़ाइल। हम यहां केवल एक जावास्क्रिप्ट और एससीएसएस फ़ाइल के साथ चीजों को न्यूनतम रख रहे हैं।

जिला फ़ोल्डर वह जगह है जहां हम अपनी संकलित सीएसएस और जावास्क्रिप्ट फाइलें रखेंगे। और img फ़ोल्डर हमारी पृष्ठभूमि छवि के लिए है।

गल्प को कॉन्फ़िगर करना

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

पैकेज इंस्टॉल करना और मॉड्यूल आयात करना

संकुल को स्थापित करने के लिए, एक टर्मिनल या कमांड लाइन विंडो खोलें और प्रोजेक्ट निर्देशिका में नेविगेट करें।

फिर npm install run चलाएं package.json . में सूचीबद्ध संकुल को संस्थापित करने के लिए फ़ाइल। मैं npm अपडेट चलाने की भी अनुशंसा करता हूं बाद में यह सुनिश्चित करने के लिए कि आप प्रत्येक पैकेज के नवीनतम संस्करणों का उपयोग कर रहे हैं। सिर्फ इसलिए कि मेरे पास GitHub रेपो में मौजूद संस्करण समय के साथ पुराने हो जाएंगे।

एक बार जब आप सब कुछ स्थापित कर लेते हैं, तो आइए हमारे gulpfile पर एक नज़र डालें।

आयात मॉड्यूल

सबसे पहले, हम npm पैकेज आयात कर रहे हैं जिसे हमने मॉड्यूल के रूप में स्थापित किया है। यह हमें हमारे गल्प कार्यों में पैकेज कार्यों तक पहुंचने में सक्षम बनाता है। यह कोड में कैसा दिखता है:

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const terser = require('gulp-terser');
const browsersync = require('browser-sync').create();

सबसे ऊपर, हम कुछ गल्प फ़ंक्शन आयात कर रहे हैं:src , गंतव्य , देखो , और श्रृंखला ।

फिर हम अन्य पैकेज लोड कर रहे हैं:

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

हम इस प्रोजेक्ट में कार्यप्रवाह को न्यूनतम रख रहे हैं क्योंकि फोकस Browsersync पर है।

अब, आइए उन विभिन्न गल्प कार्यों पर एक नज़र डालते हैं जिन्हें हमने अपने गल्पफाइल में कॉन्फ़िगर किया है।

सास कार्य

पहला कार्य हमारा Sass कार्य है:

// Sass Task
function scssTask(){
  return src('app/scss/style.scss', { sourcemaps: true })
      .pipe(sass())
      .pipe(postcss([cssnano()]))
      .pipe(dest('dist', { sourcemaps: '.' }));
}

यह फ़ंक्शन style.scss लेगा फ़ाइल, इसे sass() . का उपयोग करके CSS में संकलित करें फ़ंक्शन, फिर cssnano() . के साथ फ़ाइल को छोटा करने के लिए PostCSS का उपयोग करें , और अंत में परिणामी CSS फ़ाइल को dist . में सहेजें फ़ोल्डर। हम एक स्रोतमैप फ़ाइल भी बना रहे हैं ताकि आप देख सकें कि Sass फ़ाइल में प्रत्येक शैली नियम कहाँ से आता है।

JavaScript टास्क

अगला कार्य हमारा जावास्क्रिप्ट कार्य है:

// JavaScript Task
function jsTask(){
  return src('app/js/script.js', { sourcemaps: true })
    .pipe(terser())
    .pipe(dest('dist', { sourcemaps: '.' }));
}

यह फ़ंक्शन script.js लेता है फ़ाइल और इसे terser() using का उपयोग करके छोटा करता है , फिर परिणामी फ़ाइल को dist . में सहेजता है फ़ोल्डर। यह एक सोर्समैप फ़ाइल भी बनाएगा। हम बंडलिंग जैसा कुछ और उन्नत नहीं कर रहे हैं, बस यह मानते हुए कि हम यहां वैनिला जावास्क्रिप्ट के साथ काम कर रहे हैं।

आइए अब Browsersync अनुभाग पर चलते हैं!

ब्राउज़रसिंक को अपने गुलफाइल में जोड़ना

हमारे गल्पफाइल में, हमने शुरू में इस लाइन के साथ जावास्क्रिप्ट स्थिरांक के रूप में ब्राउजरसिंक को आयात किया था:. बनाएं() फ़ंक्शन, जैसा कि नाम से ही स्पष्ट है, एक ब्राउज़रसिंक इंस्टेंस बनाता है जिसका उपयोग हम अपने स्थानीय सर्वर को चलाने के लिए कर सकते हैं।

फिर हम अपने Browsersync कार्य बना सकते हैं!

Browsersyncसर्विस टास्क

हमारा पहला काम, browsersyncServe , स्थानीय सर्वर को इनिशियलाइज़ करेगा:

function browsersyncServe(cb){
  browsersync.init({
    server: {
      baseDir: '.'
    }    
  });
  cb();
}

यह browsersync.init() चलाता है फ़ंक्शन जो baseDir . का उपयोग करके स्थानीय सर्वर को लॉन्च करता है सर्वर विकल्प। हमारे मामले में, हम baseDir . सेट करना चाहते हैं करने के लिए '।' . यह इंगित करता है कि स्थानीय सर्वर वेबसाइट को उसी निर्देशिका से लॉन्च करेगा जिसमें गल्पफाइल है।

चूंकि दोनों index.html फ़ाइल और गल्पफाइल प्रोजेक्ट रूट में हैं, हम चाहते हैं कि वेबसाइट उसी स्थान से चले।

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

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

ब्राउज़रसिंकसर्व कार्य सर्वर शुरू करेगा, लेकिन जब हम कोड परिवर्तन करते हैं तो हम ब्राउज़र को स्वचालित रूप से पुनः लोड करना चाहते हैं।

BrowsersyncReload कार्य

सर्वर को पुनः लोड करने के लिए, हमारे पास एक और कार्य है, browsersyncReload जो बस यही करेगा:

function browsersyncReload(cb){
  browsersync.reload();
  cb();
}

यह एक बहुत ही बुनियादी कार्य है- यह केवल एक चीज चलाता है browsersync.reload() Browsersync को स्थानीय वेबसाइट को पुनः लोड करने के लिए कहने के लिए।

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

ब्राउज़रसिंक को गल्प कार्यों में जोड़ना

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

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

// Default Gulp Task
exports.default = series(
  scssTask,
  jsTask,
  browsersyncServe,
  watchTask
);

जैसा कि आप कोड में देख सकते हैं, हम अपने Sass और JavaScript कार्यों को चला रहे हैं, फिर Browsersync सर्वर को इनिशियलाइज़ कर रहे हैं, और अंत में अपना वॉच टास्क चला रहे हैं।

कार्य देखें

वॉच टास्क हमारी फाइलों की निगरानी करेगा और कोड परिवर्तन का पता चलने पर आवश्यक कार्यों को चलाएगा।

// Watch Task
function watchTask(){
  watch('*.html', browsersyncReload);
  watch(['app/**/*.scss', 'app/**/*.js'], series(scssTask, jsTask, browsersyncReload));
}

हम अपने वॉच टास्क में दो काम कर रहे हैं:

• कोई भी HTML फ़ाइल देखें और browsersyncReloadचलाएं किसी भी बदलाव के बाद
• कोई भी Sass या JavaScript फ़ाइल देखें और Sass कार्य, JavaScript कार्य, और फिर browsersyncReload चलाएँ किसी भी बदलाव के बाद

मैंने उन्हें अलग रखा क्योंकि जब हम केवल HTML फ़ाइल को अपडेट करते हैं तो मैं Sass और JavaScript कार्यों को नहीं चलाना चाहता था। बेशक, HTML बदलने पर आप हर कार्य को फिर से चला सकते हैं- इसमें थोड़ा अधिक समय लगेगा।