Sledování změn dokumentů v Gulp

Není příliš pohodlné pokaždé volat příkaz v konzoli při potřebě provést nějakou transformaci - při psaní kodu se to musí dělat velmi často.

Proto má Gulp vestavěnou speciální funkci watch pro sledování změn souborů. Při změně kteréhokoli ze sledovaných souborů se příslušná úloha spustí automaticky.

Podívejme se na příklad transformace LESS na CSS. Nejprve připojme všechno potřebné:

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

Nyní vytvořme úlohu pro transformaci:

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

Nyní provedeme export anonymní funkce, uvnitř které budeme sledovat změny našich souborů, přičemž v tomto případě zavoláme naši úlohu:

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

Po spuštění se v příkazovém řádku bude točit "nekonečná" úloha. To znamená, že do tohoto terminálu nebude možné zadávat další příkazy. Přerušit provedení takové úlohy lze stisknutím kombinace Ctrl + C v terminálu.

Lze sledovat různé skupiny souborů, a přiřazovat k nim různé úlohy:

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

Nebo pro jednu skupinu lze spustit sérii úloh:

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

Předpokládejme, že máte skupinu JavaScriptových souborů. Zařiďte, aby tyto soubory byly sloučeny do jednoho souboru, a poté byla provedena minimalizace tohoto souboru. Zařiďte, aby se úloha provedla při změně kteréhokoli z našich souborů.