Nettoyage du dossier avant sauvegarde dans Gulp

Vous avez sûrement déjà remarqué qu'en sauvegardant les fichiers dans un dossier, Gulp ne supprime pas les fichiers précédents de celui-ci.

Pour que cela se produise, il faut installer un plugin spécial del.

Installons-le en exécutant la commande suivante :

npm install del --save-dev

Ce plugin est différent de ceux que nous avons utilisés précédemment en ce qu'il est utilisé en dehors de la chaîne de méthodes pipe. C'est pourquoi dans ce cas nous devons créer un groupe de tâches : la première tâche sera pour nettoyer le dossier, et la seconde fera le travail utile.

Prenons pour exemple comme travail utile la minification de CSS.

Connectons tout le nécessaire :

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

Créons une tâche pour nettoyer le dossier dist :

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

Créons une tâche pour la minification du CSS :

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

Exécutons une série de tâches :

exports.default = series(taskDel, taskCss);

Rassemblons tout et obtenons le code suivant :

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

exports.default = series(taskDel, taskCss);

Créez une tâche pour la minification du JavaScript. Nettoyez le dossier avant chaque lancement de la tâche.

Créez un groupe de trois tâches : une tâche pour nettoyer le dossier, une tâche pour la minification du CSS et une tâche pour la minification du JavaScript. Déterminez quelles tâches doivent s'exécuter séquentiellement, et lesquelles - en parallèle.