Övervakning av dokumentändringar i Gulp

Det är inte särskilt bekvämt att varje gång behöva anropa ett kommando i konsolen när man behöver utföra någon form av omvandling - eftersom detta måste göras väldigt ofta när man skriver kod.

Därför har Gulp en inbyggd funktion watch för att övervaka ändringar i filer. När någon av de övervakade filerna ändras kommer motsvarande uppgift att startas automatiskt.

Låt oss titta på ett exempel med omvandling av LESS till CSS. Låt oss först ansluta allt som behövs:

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

Nu skapar vi en uppgift för omvandlingen:

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

Låt oss nu exportera en anonym funktion, inuti vilken vi kommer att spåra ändringar i våra filer och anropa vår uppgift i det här fallet:

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

Efter start i kommandoraden kommer en "evig" uppgift att köras. Det betyder att man inte kommer att kunna mata in andra kommandon i denna terminal. Man kan avbryta exekveringen av en sådan uppgift genom att trycka på kombinationen Ctrl + C i terminalen.

Man kan övervaka olika grupper av filer och koppla olika uppgifter till dem:

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

Eller så kan man utföra en serie uppgifter för en grupp:

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

Antag att du har en grupp JavaScript-filer. Gör så att dessa filer slås ihop till en fil, och att minimering av denna fil sedan utförs. Gör så att uppgiften utförs när någon av våra filer ändras.