Überwachung von Dokumentänderungen in Gulp

Es ist nicht sehr praktisch, jedes Mal den Befehl in der Konsole aufzurufen, wenn eine Transformation durchgeführt werden muss - schließlich muss dies beim Codieren sehr häufig gemacht werden.

Daher verfügt Gulp über eine spezielle Funktion watch zur Überwachung von Dateiänderungen. Bei Änderung einer der überwachten Dateien wird die entsprechende Aufgabe automatisch ausgeführt.

Schauen wir uns das an einem Beispiel zur Transformation von LESS in CSS an. Zuerst binden wir alles Notwendige ein:

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

Jetzt erstellen wir eine Aufgabe für die Transformation:

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

Nun exportieren wir eine anonyme Funktion, in der wir die Änderungen unserer Dateien überwachen und in diesem Fall unsere Aufgabe aufrufen:

exports.default = function() {
	watch('src/*.less', task);
};

Nach dem Start in der Befehlszeile läuft eine "ewige" Aufgabe. Das bedeutet, dass in dieses Terminal keine anderen Befehle eingegeben werden können. Die Ausführung einer solchen Aufgabe kann durch Drücken der Tastenkombination Ctrl + C im Terminal abgebrochen werden.

Es können verschiedene Dateigruppen überwacht und verschiedenen Aufgaben zugeordnet werden:

exports.default = function() {
	watch('src/*.less', task1);
	watch('src/*.sass', task1);
};

Oder für eine Gruppe kann eine Reihe von Aufgaben ausgeführt werden:

exports.default = function() {
	watch('src/*.less', series(task1, task2));
};

Angenommen, Sie haben eine Gruppe von JavaScript-Dateien. Sorgen Sie dafür, dass diese Dateien in einer Datei zusammengeführt werden und anschließend die Minimierung dieser Datei ausgeführt wird. Sorgen Sie dafür, dass die Aufgabe bei Änderung einer unserer Dateien ausgeführt wird.