Gulp တွင် ဖိုင်များနှင့် အလုပ်လုပ်ခြင်း

Gulp သည် ဖိုင်အစုတစ်ခုကို ယူပြီး ၎င်းအစုနှင့် လုပ်ဆောင်ချက်အချို့ကို လုပ်ဆောင်ကာ ပြုပြင်မွမ်းမံထားသော ဖိုင်များကို လိပ်စာအသစ်တစ်ခုသို့ ထားရှိရန် ခွင့်ပြုပေးသည်။

ဤအတွက် အထူး လုပ်ဆောင်ချက်များ src နှင့် dest ကို ရည်ရွယ်ထားပါသည်။ ပထမဆုံးအနေနှင့် ၎င်းတို့ကို ကျွန်ုပ်တို့၏ စာကြည့်တိုက်မှ သွင်းယူကြပါစို့:

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

လုပ်ဆောင်ချက် src သည် သတ်မှတ်ထားသောဖိုင်ကို ရယူရန် ခွင့်ပြုပေးသည်:

function task(cb) {
	return src('src/styles.css'); // cb ခေါ်ယူခြင်းအစား return
}

ထို့နောက် ဤဖိုင်နှင့် လုပ်ဆောင်ချက် pipe ကိုအသုံးပြု၍ လုပ်ဆောင်ချက်အမျိုးမျိုးကို ကွင်းဆက်အတိုင်း လုပ်ဆောင်နိုင်ပါသည်။ ပုံကြမ်းအားဖြင့် ဤသို့ပုံပေါ်ပါသည်:

function task(cb) {
	return src('src/styles.css')
		.pipe(operation1)
		.pipe(operation2)
		.pipe(operation3)
}

ကွင်းဆက်အတွင်းရှိ နောက်ဆုံး pipe ခေါ်ယူခြင်းသည် လုပ်ဆောင်ပြီးသော လုပ်ဆောင်ချက်များ၏ ရလဒ်ကို ပို့ဆောင်ရန် ဖိုင်တွဲကို သတ်မှတ်ပေးသော လုပ်ဆောင်ချက် dest ဖြင့် ပြီးဆုံးပါသည်:

function task(cb) {
	return src('src/styles.css')
		.pipe(operation1)
		.pipe(operation2)
		.pipe(operation3)
		.pipe(dest('dist')); // dist ဖိုလ်ဒါသို့ ပို့မည်
}

လုပ်ဆောင်ချက်တစ်ခုစီသည် ကျွန်ုပ်တို့၏ဖိုင်နှင့် လှည့်စားမှုအချို့ကို ထုတ်လုပ်ပေးပါသည်။ ဥပမာအားဖြင့်၊ ပထမဆုံး LESS ကို CSS သို့ ပြောင်းလဲနိုင်သည်၊ ထို့နောက် CSS properties များသို့ ရှေ့ဆက်စကားလုံးများ ပေါင်းထည့်နိုင်သည်၊ ထို့နောက် ရရှိလာသော CSS ကို သေးငယ်အောင်လုပ်နိုင်သည် စသဖြင့်ဖြစ်သည်။

လုပ်ဆောင်ချက်တစ်ခုစီအတွက် ၎င်း၏ကိုယ်ပိုင် npm Gulp plugin ကို ရည်ရွယ်ထားပါသည်။ Plugins များကို ထည့်သွင်းရန် လိုအပ်ပြီး ကျွန်ုပ်တို့၏ဖိုင်သို့ ချိတ်ဆက်ရန် လိုအပ်ပါသည်။ အမျိုးမျိုးသော plugins များကို လေ့လာခြင်းကို နောက်လာမည့် သင်ခန်းစာများတွင် လုပ်ဆောင်ပါမည်။

ယခုအတွက် လေ့ကျင့်ခန်းအနေနှင့် ကျွန်ုပ်တို့၏ဖိုင်ကို ယူပြီး ၎င်း၏ကူးယူမှုကို ဖိုလ်ဒါ dist သို့ ပို့ကြည့်ကြပါစို့၊ ၎င်းအပေါ် လုပ်ဆောင်ချက်အချို့ကို လုပ်ဆောင်ပြီးသကဲ့သို့ဖြစ်သည်:

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

CSS ဖိုင်သုံးခုကို ဖန်တီးပါ။ အများသူငှာ တာဝန်သုံးခုကို ဖန်တီးပါ။ တာဝန်တစ်ခုစီသည် ကျွန်ုပ်တို့၏ဖိုင်များထဲမှ တစ်ခုကို သတ်မှတ်ထားသောဖိုလ်ဒါတွင် ကူးယူမှုတစ်ခု ဖန်တီးစေပါစို့။

ဖိုင်များသို့ လမ်းကြောင်းများ Array

လုပ်ဆောင်ချက် src parameter သည် ဖိုင်တစ်ခုထက် ပို၍ array ပုံစံဖြင့် ချက်ချင်းလက်ငင်း လက်ခံနိုင်သည်:

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

CSS ဖိုင်သုံးခုကို ဖန်တီးပါ။ တာဝန်တစ်ခုကို ဖန်တီးပါ၊ သတ်မှတ်ထားသောဖိုလ်ဒါထဲတွင် ကျွန်ုပ်တို့၏ဖိုင်များ၏ ကူးယူမှုကို ဖန်တီးပေးပါ။