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 ကို အနည်းဆုံးပမာဏသို့ ချုံ့ပါ။