Kufanya Kazi na Faili katika Gulp

Gulp inaruhusu kuchukua kundi la faili, kufanya operesheni fulani na kundi hilo, kisha kuweka faili zilizobadilishwa kwa anwani mpya.

Hii inafanywa kwa kutumia vitendo maalum src na dest. Hebu kwanza tuwaingize kutoka kwa maktaba yetu:

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

Kitendo src kinaruhusu kupata faili iliyoonyeshwa:

function task(cb) {
	return src('src/styles.css'); // return badala ya kuita cb
}

Kwa faili hii kisha kwa mnyororo unaweza kufanya operesheni mbalimbali kwa kutumia kitendo pipe. Kimfumo hii inaonekana kama ifuatavyo:

function task(cb) {
	return src('src/styles.css')
		.pipe(operesheni1)
		.pipe(operesheni2)
		.pipe(operesheni3)
}

Kiwango cha mwisho cha pipe katika mnyororo huishia kwa kitendo dest, kinachoainisha folda, ambayo matokeo ya operesheni zilizofanywa zitapelekwa:

function task(cb) {
	return src('src/styles.css')
		.pipe(operesheni1)
		.pipe(operesheni2)
		.pipe(operesheni3)
		.pipe(dest('dist')); // tutapeleka kwenye folda dist
}

Kila operesheni hufanya mabadilisho fulani kwa faili yetu. Kwa mfano, kwanza unaweza kubadilisha LESS kuwa CSS, kisha kuongeza viambishi awali kwa sifa za CSS, kisha kupunguza CSS iliyopatikana na kadhalika.

Kwa kila operesheni kuna programu-jalizi (plugin) ya npm maalum kwa Gulp. Programu-jalizi zinahitaji kusakinishwa na kuunganishwa kwa faili yetu. Tutajifunza programu-jalizi mbalimbali katika masomo yajayo.

Kwa sasa kwa ajili ya kujoea hebu tuchukue faili yetu na tupeleke nakala yake kwenye folda dist, kana kwamba tumefanya operesheni fulani juu yake:

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

Tengeneza faili tatu za CSS. Tengeneza kazi tatu za umma. Kila kazi iwe inatengeneza nakala ya moja ya faili zetu kwenye folda iliyoainishwa.

Safu ya anwani za faili

Kitendo src kinaweza kukubali kigezo sio faili moja, bali faili nyingi mara moja kwa njia ya safu:

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

Tengeneza faili tatu za CSS. Tengeneza kazi, ambayo itatengeneza nakala ya faili zetu kwenye folda iliyoonyeshwa.