Cleaning a Folder Before Saving in Gulp

You have probably already noticed that when saving files to a folder, Gulp does not delete previous files from it.

To make this happen, you need to install a special plugin del.

Let's install it by running the following command:

npm install del --save-dev

This plugin differs from those used by us earlier in that it is used outside the chain of pipe methods. Therefore, in this case we must create a group of tasks: the first task will be for cleaning the folder, and the second will do the useful work.

For example, let's choose CSS minification as the useful work.

Let's connect everything we need:

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

Let's create a task to clean the dist folder:

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

Let's create a task for CSS minification:

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

Let's run a series of tasks:

exports.default = series(taskDel, taskCss);

Let's put it all together and get the following code:

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

exports.default = series(taskDel, taskCss);

Create a task for JavaScript minification. Clean the folder before each task run.

Create a group of three tasks: a task for folder cleaning, a task for CSS minification, and a task for JavaScript minification. Determine which tasks should be executed sequentially, and which ones - in parallel.