Arbeta med filer i Gulp

Gulp gör det möjligt att ta en grupp filer, utföra en operation med denna grupp och sedan placera de ändrade filerna på en ny plats.

För detta är speciella funktioner src och dest avsedda. Låt oss först importera dem från vårt bibliotek:

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

Funktionen src gör det möjligt att erhålla den angivna filen:

function task(cb) {
	return src('src/styles.css'); // return istället för att anropa cb
}

Med denna fil kan man sedan i en kedja utföra olika operationer med funktionen pipe. Schematiskt ser det ut så här:

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

Det sista anropet till pipe i kedjan avslutas med funktionen dest, som anger mappen där resultatet av de utförda operationerna ska skickas:

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

Varje operation utför en manipulation med vår fil. Till exempel kan man först omvandla LESS till CSS, sedan lägga till prefix till CSS-egenskaper, därefter minimera den resulterande CSS:en och så vidare.

För varje operation finns en specifik npm- plugin för Gulp avsedd. Plugins måste installeras och kopplas till vår fil. Vi kommer att ägna oss åt att studera olika plugins i kommande lektioner.

Låt oss för att värma upp ta vår fil och skicka en kopia av den till mappen dist, som om vi hade utfört några operationer på den:

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

Skapa tre CSS-filer. Skapa tre publika uppgifter. Låt varje uppgift skapa en kopia av en av våra filer i en given mapp.

Array med sökvägar till filer

Funktionen src kan ta inte en fil som parameter, utan flera på en gång i form av en array:

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

Skapa tre CSS-filer. Skapa en uppgift som gör en kopia av våra filer i den angivna mappen.