Overvågning af dokumentændringer i Gulp

Det er ikke særlig praktisk hver gang at skulle kalde en kommando i konsollen, når man har brug for at udføre en eller anden transformation - det skal man trods alt gøre meget ofte, når man skriver kode.

Derfor har Gulp en indbygget funktion kaldet watch til at overvæge ændringer i filer. Når enhver af de overvågede filer ændres, vil den tilsvarende opgave blive startet automatisk.

Lad os se på et eksempel med transformation af LESS til CSS. Til at starte med, lad os importere alt det nødvendige:

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

Nu laver vi en opgave til transformationen:

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

Nu eksporterer vi en anonym funktion, inde i hvilken vi vil spore ændringer i vores filer og i så fald kalde vores opgave:

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

Efter opstart i kommandolinjen vil der køre en "evig" opgave. Det betyder, at man ikke vil kunne indtaste andre kommandoer i denne terminal. Man kan afbryde udførelsen af en sådan opgave ved at trykke kombinationen Ctrl + C i terminalen.

Man kan spore forskellige grupper af filer og knytte forskellige opgaver til dem:

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

Eller man kan udføre en serie af opgaver for én gruppe:

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

Antag, at du har en gruppe JavaScript-filer. Sørg for, at disse filer bliver slået sammen til én fil, og at der derefter udføres minimering af denne fil. Sørg for, at opgaven udføres ved ændring af enhver af vores filer.