Arbejde med filer i Gulp

Gulp giver mulighed for at tage en gruppe filer, udføre en operation med denne gruppe og derefter placere de modificerede filer på en ny adresse.

For dette formål er der specielle funktioner src og dest. Lad os til at starte med importere dem fra vores bibliotek:

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

Funktionen src giver mulighed for at hente den angivne fil:

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

Med denne fil kan man derefter i kæde udføre forskellige operationer ved hjælp af funktionen pipe. Skematisk ser det ud som følger:

function task(cb) {
	return src('src/styles.css')
		.pipe(operation1)
		.pipe(operation2)
		.pipe(operation3)
}

Det sidste kald til pipe i kæden afsluttes med funktionen dest, som angiver mappen, hvori resultatet af de udførte operationer vil blive placeret:

function task(cb) {
	return src('src/styles.css')
		.pipe(operation1)
		.pipe(operation2)
		.pipe(operation3)
		.pipe(dest('dist')); // send til mappen dist
}

Hver operation udfører en manipulation med vores fil. For eksempel kan man først transformere LESS til CSS, derefter tilføje præfikser til CSS-egenskaber, derefter minimere den resulterende CSS og så videre.

Der er en separat npm plugin til Gulp for hver operation. Plugins skal installeres og tilkobles vores fil. Vi vil studere forskellige plugins i de næste lektioner.

Lad os for opvarmning tage vores fil og sende en kopi af den til mappen dist, som om vi havde udført nogle operationer på den:

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

Opret tre CSS-filer. Opret tre offentlige opgaver. Lad hver opgave oprette en kopi af en af vores filer i en angivet mappe.

Array af filstier

Funktionen src kan tage ikke én fil, men flere på én gang i form af et array:

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

Opret tre CSS-filer. Opret en opgave, som laver en kopi af vores filer i den angivne mappe.