Overvåking av endringer i dokumenter i Gulp

Det er ikke særlig praktisk å kalle en kommando i konsollen hver gang det er nødvendig å utføre en transformasjon - når man skriver kode må dette gjøres veldig ofte.

Derfor har Gulp en innebygd funksjon watch for å overvåke endringer i filer. Når noen av de overvåkede filene endres, vil den tilsvarende oppgaven starte automatisk.

La oss se på et eksempel med transformasjon av LESS til CSS. Først, la oss importere alt nødvendig:

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

La oss nå lage en oppgave for transformasjonen:

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

La oss nå eksportere en anonym funksjon, innenfor den vil vi overvåke endringer i filene våre, og kalle oppgaven vår i dette tilfellet:

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

Etter oppstart vil en "evig" oppgave kjøre i kommandolinjen. Dette betyr at man ikke vil kunne skrive inn andre kommandoer i denne terminalen. Man kan avbryte kjøringen av en slik oppgave ved å trykke kombinasjonen Ctrl + C i terminalen.

Man kan overvåke ulike grupper av filer, og knytte ulike oppgaver til dem:

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

Eller man kan utføre en serie med oppgaver for én gruppe:

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

Anta at du har en gruppe med JavaScript-filer. Gjør slik at disse filene slås sammen til én fil, og deretter utføres minimering av denne filen. Gjør slik at oppgaven utføres ved endring av noen av filene våre.