Rad sa fajlovima u Gulp

Gulp omogućava da uzmete grupu fajlova, izvršite neku operaciju nad tom grupom, a zatim izmenjene fajlove postavite na novu adresu.

Za to su namenjene specijalne funkcije src i dest. Hajde za početak da ih importujemo iz naše biblioteke:

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

Funkcija src omogućava da dobijete navedeni fajl:

function task(cb) {
	return src('src/styles.css'); // return umesto poziva cb
}

Nad ovim fajlom zatim po lančanom principu možete izvršavati različite operacije pomoću funkcije pipe. Šematski to izgleda na sledeći način:

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

Poslednji poziv pipe u lancu se završava funkcijom dest, koja zadaje folder u koji će otići rezultat izvršenih operacija:

function task(cb) {
	return src('src/styles.css')
		.pipe(operacija1)
		.pipe(operacija2)
		.pipe(operacija3)
		.pipe(dest('dist')); // pošaljemo u folder dist
}

Svaka operacija vrši određenu manipulaciju našim fajlom. Na primer, možete prvo da transformišete LESS u CSS, zatim da dodate prefikse CSS svojstvima, pa da minifikujete dobijeni CSS i tako dalje.

Za svaku operaciju je namenjen svoj npm plugin za Gulp. Plugine je potrebno instalirati i povezati sa našim fajlom. Proučavanjem različitih pluginova bavićemo se u narednim lekcijama.

Za sada, za zagrevanje, hajde da uzmemo naš fajl i pošaljemo njegovu kopiju u folder dist, kao da smo izvršili neke operacije nad njim:

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

Napravite tri CSS fajla. Napravite tri javne taska. Neka svaki task kreira kopiju jednog od naših fajlova u navedenom folderu.

Niz putanja do fajlova

Funkcija src kao parametar može da primi ne jedan fajl, već odmah nekoliko u obliku niza:

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

Napravite tri CSS fajla. Napravite task, koji će napraviti kopiju naših fajlova u navedenom folderu.