Lavorare con i file in Gulp

Gulp permette di prendere un gruppo di file, eseguire un'operazione su questo gruppo, e poi posizionare i file modificati in un nuovo percorso.

Per questo sono destinate le funzioni speciali src e dest. Per cominciare, importiamole dalla nostra libreria:

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

La funzione src permette di ottenere il file specificato:

function task(cb) {
	return src('src/styles.css'); // return invece di chiamare cb
}

Con questo file si possono poi eseguire in catena varie operazioni utilizzando la funzione pipe. Schematicamente appare così:

function task(cb) {
	return src('src/styles.css')
		.pipe(operazione1)
		.pipe(operazione2)
		.pipe(operazione3)
}

L'ultima chiamata pipe nella catena termina con la funzione dest, che specifica la cartella in cui verrà inviato il risultato delle operazioni eseguite:

function task(cb) {
	return src('src/styles.css')
		.pipe(operazione1)
		.pipe(operazione2)
		.pipe(operazione3)
		.pipe(dest('dist')); // inviamo alla cartella dist
}

Ogni operazione produce una qualche manipolazione del nostro file. Ad esempio, si può prima trasformare LESS in CSS, poi aggiungere prefissi alle proprietà CSS, poi minimizzare il CSS ottenuto e così via.

Per ogni operazione è destinato un proprio plugin npm per Gulp. I plugin vanno installati e collegati al nostro file. Lo studio di vari plugin lo affronteremo nelle prossime lezioni.

Per ora, per riscaldarci, prendiamo il nostro file e inviamone una copia nella cartella dist, come se avessimo eseguito su di esso alcune operazioni:

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

Create tre file CSS. Create tre attività pubbliche. Ogni attività deve creare una copia di uno dei nostri file in una cartella specificata.

Array di percorsi di file

La funzione src può accettare come parametro non un solo file, ma più file contemporaneamente sotto forma di array:

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

Create tre file CSS. Create un'attività, che crei una copia dei nostri file nella cartella specificata.