Gulp में फाइलों को मर्ज करना

CSS कोड लिखते समय इसे कई फाइलों में विभाजित करना सुविधाजनक होता है। हालाँकि, जितनी अधिक फाइलें होंगी, साइट का पेज उतनी ही धीमी गति से लोड होगा। ऐसा लगता है कि कोड लिखते समय कई फाइलों में काम करना सुविधाजनक होता है, लेकिन HTML से कनेक्ट करते समय इन फाइलों को एक में मिला देना चाहिए।

इसमें एक विशेष प्लगइन gulp-concat हमारी मदद करेगा। चलिए इसे अपने प्रोजेक्ट में इंस्टॉल करते हैं: अपने प्रोजेक्ट में:

npm install gulp-concat --save-dev

इसके बाद इंस्टॉल किए गए प्लगइन को इम्पोर्ट करें:

let {src, dest} = require('gulp');
let concat = require('gulp-concat');

चलिए इसकी मदद से कई CSS फाइलों को एक में जोड़ते हैं:

function task(cb) {
	return src('src/*.css')
		.pipe(concat('bundle.css'))
		.pipe(dest('dist'));
}

कई JavaScript फाइलों को एक में मर्ज करें।

मर्ज की गई फाइल के साथ ऑपरेशन

मर्ज करने के बाद, चेन के साथ आगे एक मर्ज की गई फाइल ही बढ़ेगी और उस पर विभिन्न ऑपरेशन किए जा सकते हैं।

उदाहरण के लिए, आइए CSS मिनिमाइज़ेशन करते हैं:

function task(cb) {
	return src('src/*.css')
		.pipe(concat('bundle.css'))
		.pipe(cleanCSS())
		.pipe(dest('dist'));
}

कई LESS फाइलों को एक में मर्ज करें, फिर उस फाइल को CSS में बदलें, फिर प्राप्त CSS का मिनिमाइज़ेशन करें।