Rensning av mapp innan sparande i Gulp

Du har säkert redan lagt märke till att när filer sparas i en mapp, så tar inte Gulp bort tidigare filer från den.

För att detta ska hända måste du installera ett speciellt tillägg del.

Låt oss installera det genom att köra följande kommando:

npm install del --save-dev

Detta tillägg skiljer sig från de vi använt tidigare genom att det används utanför kedjan av metoder pipe. Därför måste vi i det här fallet skapa en grupp av uppgifter: den första uppgiften kommer att rensa mappen, och den andra kommer att göra det användbara arbetet.

Låt oss för exemplets skull välja CSS-minifiering som det användbara arbetet.

Låt oss ansluta allt som behövs:

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

Låt oss skapa en uppgift för att rensa mappen dist:

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

Låt oss skapa en uppgift för CSS-minifiering:

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

Låt oss köra en serie uppgifter:

exports.default = series(taskDel, taskCss);

Låt oss samla allt och få följande kod:

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

exports.default = series(taskDel, taskCss);

Skapa en uppgift för minifiering av JavaScript. Rensa mappen före varje start av uppgiften.

Skapa en grupp med tre uppgifter: en uppgift för att rensa mappen, en uppgift för minifiering av CSS och en uppgift för minifiering av JavaScript. Bestäm vilka uppgifter som ska köras i sekvens, och vilka som kan köras parallellt.