Arbeid med filer i Gulp

Gulp lar deg ta en gruppe filer, utføre en operasjon med denne gruppen, og deretter plassere de endrede filene på en ny adresse.

For dette er det spesielle funksjoner src og dest. La oss først importere dem fra vårt bibliotek:

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

Funksjonen src lar deg hente den spesifiserte filen:

function task(cb) {
	return src('src/styles.css'); // return i stedet for å kalle cb
}

Med denne filen kan du deretter utføre ulike operasjoner i en kjede ved hjelp av funksjonen pipe. Skjematisk ser det slik ut:

function task(cb) {
	return src('src/styles.css')
		.pipe(operasjon1)
		.pipe(operasjon2)
		.pipe(operasjon3)
}

Det siste kallet til pipe i kjeden avsluttes med funksjonen dest, som angir mappen som resultatet av de utførte operasjonene sendes til:

function task(cb) {
	return src('src/styles.css')
		.pipe(operasjon1)
		.pipe(operasjon2)
		.pipe(operasjon3)
		.pipe(dest('dist')); // sender til mappen dist
}

Hver operasjon utfører en manipulasjon med filen vår. For eksempel kan du først transformere LESS til CSS, deretter legge til prefikser til CSS-egenskaper, deretter minimere den resulterende CSS-en og så videre.

For hver operasjon er det en egen npm plugin for Gulp. Plugins må installeres og kobles til filen vår. Vi vil studere ulike plugins i de følgende leksjonene.

La oss for oppvarming ta filen vår og sende en kopi av den til mappen dist, som om vi har utført noen operasjoner på den:

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

Lag tre CSS-filer. Lag tre offentlige oppgaver. La hver oppgave lage en kopi av en av filene våre i en angitt mappe.

Matrise med filstier

Funksjonen src kan ta ikke bare én fil, men flere samtidig i form av en matrise:

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

Lag tre CSS-filer. Lag en oppgave som lager en kopi av filene våre i den angitte mappen.