Limpieza de carpeta antes de guardar en Gulp

Probablemente ya hayas notado que al guardar archivos en una carpeta, Gulp no elimina los archivos anteriores de ella.

Para que esto suceda, necesitas instalar un complemento especial del.

Instalémoslo ejecutando el siguiente comando:

npm install del --save-dev

Este complemento se diferencia de los usados anteriormente en que se utiliza fuera de la cadena de métodos pipe. Por lo tanto, en este caso debemos crear un grupo de tareas: la primera tarea será para limpiar la carpeta, y la segunda hará el trabajo útil.

Como ejemplo, elijamos la minificación de CSS como trabajo útil.

Conectemos todo lo necesario:

let {src, dest, series} = require('gulp');
let cleanCSS = require('gulp-clean-css');
let del = require('del');

Hagamos una tarea para limpiar la carpeta dist:

function taskDel(cb) {
	return del('dist/*');
}

Hagamos una tarea para minificar CSS:

function taskCss(cb) {
	return src('src/*.css')
		.pipe(cleanCSS())
		.pipe(dest('dist'));
}

Ejecutemos una serie de tareas:

exports.default = series(taskDel, taskCss);

Juntemos todo y obtendremos el siguiente código:

function taskDel(cb) {
	return del('dist/*');
}
function taskCss(cb) {
	return src('src/*.css')
		.pipe(cleanCSS())
		.pipe(dest('dist'));
}

exports.default = series(taskDel, taskCss);

Crea una tarea para minificar JavaScript. Limpia la carpeta antes de cada ejecución de la tarea.

Crea un grupo de tres tareas: una tarea para limpiar la carpeta, una tarea para minificar CSS y una tarea para minificar JavaScript. Determina qué tareas deben ejecutarse secuencialmente y cuáles en paralelo.