Documentwijzigingen observeren in Gulp

Het is niet erg handig om elke keer een opdracht in de console aan te roepen wanneer je een transformatie moet uitvoeren - bij het schrijven van code moet dit immers zeer vaak gebeuren.

Daarom heeft Gulp een ingebouwde functie watch voor het observeren van wijzigingen in bestanden. Wanneer een van de geobserveerde bestanden wordt gewijzigd, wordt de bijbehorende taak automatisch gestart.

Laten we kijken naar een voorbeeld van het transformeren van LESS naar CSS. Laten we eerst alles nodig importeren:

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

Laten we nu een taak maken voor de transformatie:

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

Laten we nu een anonieme functie exporteren, waarin we wijzigingen in onze bestanden zullen volgen en in dat geval onze taak aanroepen:

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

Na het starten draait er een "eeuwige" taak in de commandoregel. Dit betekent dat je in deze terminal geen andere commando's kunt invoeren. Je kunt de uitvoering van zo'n taak onderbreken door in de terminal de combinatie Ctrl + C in te drukken.

Je kunt verschillende groepen bestanden volgen en er verschillende taken aan koppelen:

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

Of je kunt een reeks taken uitvoeren voor één groep:

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

Stel je hebt een groep JavaScript-bestanden. Zorg ervoor dat deze bestanden worden samengevoegd tot één bestand, en dat vervolgens minimalisatie van dat bestand wordt uitgevoerd. Zorg ervoor dat de taak wordt uitgevoerd bij wijziging van een van onze bestanden.