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-এর মিনিমাইজেশন সম্পন্ন করুন।