Puna me skedarët në Gulp

Gulp lejon marrjen e një grupi skedarësh, kryerjen e një operacioni me këtë grup, dhe më pas vendosjen e skedarëve të modifikuar në një adresë të re.

Për këtë qëllim shërbejnë funksionet speciale src dhe dest. Le t'i importojmë fillimisht nga biblioteka jonë:

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

Funksioni src lejon marrjen e skedarit të specifikuar:

function task(cb) {
	return src('src/styles.css'); // return në vend të thirrjes së cb
}

Me këtë skedar më pas mund të kryhen operacione të ndryshme në zinxhir duke përdorur funksionin pipe. Skematikisht kjo duket si më poshtë:

function task(cb) {
	return src('src/styles.css')
		.pipe(operacioni1)
		.pipe(operacioni2)
		.pipe(operacioni3)
}

Thirrja e fundit e pipe në zinxhir përfundon me funksionin dest, i cili përcakton dosjen ku do të dërgohet rezultati i operacioneve të kryera:

function task(cb) {
	return src('src/styles.css')
		.pipe(operacioni1)
		.pipe(operacioni2)
		.pipe(operacioni3)
		.pipe(dest('dist')); // do ta dërgojmë në dosjen dist
}

Çdo operacion kryen një manipullim me skedarin tonë. Për shembull, fillimisht mund të transformohet LESS në CSS, pastaj të shtohen prefikset në vetitë CSS, më pas të minimizohet CSS i përftuar e kështu me radhë.

Për çdo operacion është menduar një plugin i veçantë npm për Gulp. Plugin-at duhet të instalohen dhe të lidhen me skedarin tonë. Studimin e plugin-ave të ndryshëm do ta vazhdojmë në mësimet në vijim.

Tani për t'u ngrohur, le të marrim skedarin tonë dhe ta dërgojmë një kopje të tij në dosjen dist, sikur të kishim kryer disa operacione me të:

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

Krijoni tre skedarë CSS. Krijoni tre detyra publike. Le të jetë që çdo detyrë të krijojë një kopje të njërit prej skedarëve tanë në një dosje të caktuar.

Vargu i shtigjeve të skedarëve

Funksioni src si parametër mund të marrë jo një skedar, por menjëherë disa në formën e një vargu:

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

Krijoni tre skedarë CSS. Krijoni një detyrë, që të krijojë një kopje të skedarëve tanë në dosjen e specifikuar.