Arbeiten mit Dateien in Gulp

Gulp erlaubt es, eine Gruppe von Dateien zu nehmen, mit dieser Gruppe eine Operation durchzuführen und dann die veränderten Dateien an einem neuen Speicherort abzulegen.

Dafür sind die speziellen Funktionen src und dest vorgesehen. Lassen Sie uns zunächst sie aus unserer Bibliothek importieren:

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

Die Funktion src ermöglicht es, die angegebene Datei zu erhalten:

function task(cb) {
	return src('src/styles.css'); // return statt Aufruf von cb
}

Mit dieser Datei können dann über eine Kette verschiedene Operationen mit der Funktion pipe durchgeführt werden. Schematisch sieht das folgendermaßen aus:

function task(cb) {
	return src('src/styles.css')
		.pipe(Operation1)
		.pipe(Operation2)
		.pipe(Operation3)
}

Der letzte pipe-Aufruf in der Kette endet mit der Funktion dest, die den Ordner angibt, in den das Ergebnis der durchgeführten Operationen gesendet wird:

function task(cb) {
	return src('src/styles.css')
		.pipe(Operation1)
		.pipe(Operation2)
		.pipe(Operation3)
		.pipe(dest('dist')); // senden in den Ordner dist
}

Jede Operation führt eine bestimmte Manipulation mit unserer Datei durch. Zum Beispiel kann man zunächst LESS in CSS transformieren, dann Präfixe zu CSS-Eigenschaften hinzufügen, dann das erhaltene CSS minimieren und so weiter.

Für jede Operation ist ein eigenes npm Plugin für Gulp vorgesehen. Plugins müssen installiert und in unserer Datei eingebunden werden. Wir werden uns mit verschiedenen Plugins in den folgenden Lektionen beschäftigen.

Lassen Sie uns zur Übung zunächst unsere Datei nehmen und eine Kopie davon in den Ordner dist senden, als ob wir einige Operationen mit ihr durchgeführt hätten:

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

Erstellen Sie drei CSS-Dateien. Erstellen Sie drei öffentliche Aufgaben. Jede Aufgabe soll eine Kopie einer unserer Dateien in einem bestimmten Ordner erstellen.

Array von Dateipfaden

Die Funktion src kann als Parameter nicht nur eine Datei, sondern mehrere in Form eines Arrays entgegennehmen:

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

Erstellen Sie drei CSS-Dateien. Erstellen Sie eine Aufgabe, die eine Kopie unserer Dateien im angegebenen Ordner erstellt.