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:

terminalnpm 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:

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

Hagamos una tarea para limpiar la carpeta dist:

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

Hagamos una tarea para minificar CSS:

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

Ejecutemos una serie de tareas:

javascriptexports.default = series(taskDel, taskCss);

Juntemos todo y obtendremos el siguiente código:

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

exports.default = series(taskDel, taskCss);