Werken met bestanden in Gulp

Gulp maakt het mogelijk om een groep bestanden te nemen, een bewerking op deze groep uit te voeren, en vervolgens de gewijzigde bestanden op een nieuwe locatie te plaatsen.

Hiervoor zijn de speciale functies src en dest bedoeld. Laten we om te beginnen ze importeren uit onze bibliotheek:

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

De functie src maakt het mogelijk om het opgegeven bestand op te halen:

function task(cb) {
	return src('src/styles.css'); // return in plaats van aanroep cb
}

Met dit bestand kunnen vervolgens verschillende bewerkingen worden uitgevoerd in een keten met behulp van de functie pipe. Schematisch ziet dit er als volgt uit:

function task(cb) {
	return src('src/styles.css')
		.pipe(bewerking1)
		.pipe(bewerking2)
		.pipe(bewerking3)
}

De laatste aanroep van pipe in de keten eindigt met de functie dest, die de map specificeert waarin het resultaat van de uitgevoerde bewerkingen wordt geplaatst:

function task(cb) {
	return src('src/styles.css')
		.pipe(bewerking1)
		.pipe(bewerking2)
		.pipe(bewerking3)
		.pipe(dest('dist')); // stuur naar map dist
}

Elke bewerking verricht een bepaalde manipulatie met ons bestand. Het is bijvoorbeeld mogelijk om eerst LESS naar CSS om te zetten, vervolgens prefixen toe te voegen aan CSS-eigenschappen, dan de verkregen CSS te minimaliseren enzovoort.

Voor elke bewerking is een eigen npm plugin voor Gulp bedoeld. Plugins moeten worden geïnstalleerd en aan ons bestand worden gekoppeld. We zullen de studie van verschillende plugins in de volgende lessen behandelen.

Laten we voor de opwarming ons bestand nemen en een kopie ervan naar de map dist sturen, alsof we er enkele bewerkingen op hebben uitgevoerd:

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

Maak drie CSS-bestanden. Maak drie publieke taken. Laat elke taak een kopie maken van een van onze bestanden in een opgegeven map.

Array van bestandspaden

De functie src kan als parameter niet één bestand ontvangen, maar meerdere in de vorm van een array:

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

Maak drie CSS-bestanden. Maak een taak, die een kopie van onze bestanden maakt in de opgegeven map.