Delo z datotekami v Gulp

Gulp omogoča jemanje skupine datotek, izvajanje določene operacije s to skupino in nato postavitev spremenjenih datotek na nov naslov.

Za to so namenjene posebne funkcije src in dest. Najprej jih uvozimo iz naše knjižnice:

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

Funkcija src omogoča pridobitev navedene datoteke:

function task(cb) {
	return src('src/styles.css'); // return namesto klica cb
}

S to datoteko lahko nato v verizi izvajamo različne operacije s funkcijo pipe. Shematično je to prikazano na naslednji način:

function task(cb) {
	return src('src/styles.css')
		.pipe(operacija1)
		.pipe(operacija2)
		.pipe(operacija3)
}

Zadnji klic pipe v verigi se konča s funkcijo dest, ki določa mapo, v katero bo poslan rezultat izvedenih operacij:

function task(cb) {
	return src('src/styles.css')
		.pipe(operacija1)
		.pipe(operacija2)
		.pipe(operacija3)
		.pipe(dest('dist')); // pošljemo v mapo dist
}

Vsaka operacija izvede določeno manipulacijo z našo datoteko. Na primer, najprej lahko pretvorimo LESS v CSS, nato dodamo predpone lastnostim CSS, nato minimiziramo dobljeni CSS in tako naprej.

Za vsako operacijo je namenjen svoj npm vtičnik za Gulp. Vtičnike je treba namestiti in povezati z našo datoteko. Preučevanje različnih vtičnikov bomo obravnavali v naslednjih lekcijah.

Za začetek vzemimo našo datoteko in pošljimo njeno kopijo v mapo dist, kot da bi izvedli nekaj operacij nad njo:

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

Naredite tri CSS datoteke. Naredite tri javne naloge. Naj vsaka naloga ustvari kopijo ene od naših datotek v določeni mapi.

Matrika poti do datotek

Funkcija src lahko kot parameter sprejme ne eno datoteko, ampak več naenkrat v obliki matrike:

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

Naredite tri CSS datoteke. Naredite nalogo, ki bo naredila kopijo naših datotek v navedeni mapi.