Gulp में फ़ाइलों के साथ कार्य

Gulp आपको फ़ाइलों का एक समूह लेने, उस समूह पर कोई ऑपरेशन करने और फिर परिवर्तित फ़ाइलों को नए पते पर रखने की अनुमति देता है।

इसके लिए विशेष फ़ंक्शन src और dest हैं। आइए सबसे पहले उन्हें हमारे पुस्तकालय से आयात करें:

javascriptlet {src, dest} = require('gulp');

src फ़ंक्शन आपको निर्दिष्ट फ़ाइल प्राप्त करने की अनुमति देता है:

javascriptfunction task(cb) {
  return src('src/styles.css'); // कॉलबैक को कॉल करने के बजाय return
}

फिर इस फ़ाइल के साथ pipe फ़ंक्शन का उपयोग करके श्रृंखला में विभिन्न ऑपरेशन किए जा सकते हैं। यह योजनाबद्ध रूप से इस प्रकार दिखता है:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(ऑपरेशन1)
    .pipe(ऑपरेशन2)
    .pipe(ऑपरेशन3)
}

श्रृंखला में अंतिम pipe कॉल dest फ़ंक्शन के साथ समाप्त होता है, जो उस फ़ोल्डर को निर्दिष्ट करता है जहां किए गए ऑपरेशन का परिणाम भेजा जाएगा:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(ऑपरेशन1)
    .pipe(ऑपरेशन2)
    .pipe(ऑपरेशन3)
    .pipe(dest('dist')); // dist फ़ोल्डर में भेजें
}

प्रत्येक ऑपरेशन हमारी फ़ाइल के साथ कुछ हेरफेर करता है। उदाहरण के लिए, आप पहले LESS को CSS में बदल सकते हैं, फिर CSS गुणों में उपसर्ग जोड़ सकते हैं, फिर प्राप्त CSS को छोटा कर सकते हैं, आदि।

प्रत्येक ऑपरेशन के लिए Gulp के लिए इसका अपना npm प्लगइन होता है। प्लगइन्स को स्थापित करने की आवश्यकता होती है और हमारी फ़ाइल से जोड़ा जाना चाहिए। विभिन्न प्लगइन्स का अध्ययन हम अगले पाठों में करेंगे।

अभी अभ्यास के लिए, आइए हमारी फ़ाइल लें और उसकी एक प्रति dist फ़ोल्डर में भेजें, मानो उस पर कुछ ऑपरेशन किए गए हों:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(dest('dist'));
}

फ़ाइल पथों की सरणी

src फ़ंक्शन एक पैरामीटर के रूप में एक फ़ाइल नहीं, बल्कि सरणी के रूप में एक साथ कई ले सकता है:

javascriptfunction task(cb) {
  let files = [
    'src/styles1.css',
    'src/styles2.css'
  ];
  
  return src(files)
    .pipe(dest('dist'));
}