Surveillance des modifications de documents dans Gulp

Il n'est pas très pratique d'invoquer manuellement une commande dans la console à chaque fois qu'il est nécessaire d'effectuer une transformation - car lors de l'écriture du code, cela doit être fait très fréquemment.

C'est pourquoi Gulp intègre une fonction spéciale watch pour surveiller les modifications des fichiers. Lors de la modification de l'un des fichiers surveillés, la tâche correspondante sera lancée automatiquement.

Regardons un exemple de transformation de LESS en CSS. Pour commencer, connectons tout le nécessaire :

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

Maintenant, créons une tâche pour la transformation :

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

Maintenant, exportons une fonction anonyme, à l'intérieur de laquelle nous surveillerons les modifications de nos fichiers, en invoquant dans ce cas notre tâche :

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

Après le lancement, une tâche "infinie" tournera dans la ligne de commande. Cela signifie que dans ce terminal, il ne sera pas possible de saisir d'autres commandes. Interrompre l'exécution d'une telle tâche peut être fait en appuyant dans le terminal sur la combinaison Ctrl + C.

Il est possible de surveiller différents groupes de fichiers, en leur attachant différentes tâches :

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

Ou on peut exécuter une série de tâches pour un même groupe :

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

Supposons que vous ayez un groupe de fichiers JavaScript. Faites en sorte que ces fichiers soient fusionnés en un seul fichier, puis que la minimisation de ce fichier soit exécutée. Faites en sorte que la tâche s'exécute à la modification de l'un de nos fichiers.