Observación de cambios en documentos en Gulp

No es muy práctico invocar un comando en la consola cada vez que se necesita realizar alguna transformación, ya que al escribir código esto tiene que hacerse con mucha frecuencia.

Por lo tanto, Gulp incluye una función especial watch para observar cambios en los archivos. Cuando cambie cualquiera de los archivos monitoreados, la tarea correspondiente se iniciará automáticamente.

Veamos un ejemplo de transformación de LESS a CSS. Primero, importemos todo lo necesario:

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

Ahora creemos una tarea para la transformación:

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

Ahora exportemos una función anónima, dentro de la cual monitorearemos los cambios de nuestros archivos, invocando en ese caso nuestra tarea:

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

Después de iniciarse, en la línea de comandos estará ejecutándose una tarea "eterna". Esto significa que en esta terminal no se podrán introducir otros comandos. Se puede interrumpir la ejecución de dicha tarea presionando en la terminal la combinación Ctrl + C.

Se pueden monitorear diferentes grupos de archivos, asignándoles diferentes tareas:

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

O se puede ejecutar una serie de tareas para un grupo:

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

Supongamos que tienes un grupo de archivos JavaScript. Configúralo para que estos archivos se combinen en un solo archivo, y luego se realice la minimización de este archivo. Configúralo para que la tarea se ejecute cuando cambie cualquiera de nuestros archivos.