Monitor veranderinge in dokumente met Gulp

Dit is nie baie gerieflik om elke keer 'n opdrag in die konsole uit te voer as jy 'n transformasie moet doen nie - want wanneer jy kode skryf, moet dit baie dikwels gedoen word.

Daarom het Gulp 'n ingeboude funksie watch om veranderinge in lêers te monitor. Wanneer enige van die gemonitorde lêers verander, sal die ooreenstemmende taak outomaties begin.

Kom ons kyk na 'n voorbeeld van die transformasie van LESS na CSS. Kom ons verbind eers alles wat nodig is:

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

Laat ons nou 'n taak maak vir die transformasie:

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

Laat ons nou 'n anonieme funksie eksporteer, waarbinne ons veranderinge in ons lêers sal monitor en in daardie geval ons taak sal aanroep:

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

Na die begin in die opdraglyn sal daar 'n "ewige" taak draai. Dit beteken dat jy nie ander opdragte in hierdie terminal kan intik nie. Jy kan die uitvoering van so 'n taak onderbreek deur in die terminal die kombinasie Ctrl + C te druk.

Jy kan verskillende groepe lêers monitor en verskillende take daaraan koppel:

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

Of jy kan 'n reeks take vir een groep uitvoer:

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

Gestel jy het 'n groep JavaScript-lêers. Maak dit so dat hierdie lêers saamgesmelt word in een lêer, en dan moet minimisering van hierdie lêer uitgevoer word. Maak dit so dat die taak uitgevoer word wanneer enige van ons lêers verander.