Czyszczenie katalogu przed zapisem w Gulp

Z pewnością już zauważyłeś, że podczas zapisywania plików do katalogu, Gulp nie usuwa z niego poprzednich plików.

Aby to się działo, należy zainstalować specjalną wtyczkę del.

Zainstalujmy ją, wykonując następujące polecenie:

npm install del --save-dev

Ta wtyczka różni się od używanych przez nas wcześniej tym, że jest używana poza łańcuchem metod pipe. Dlatego w tym przypadku musimy utworzyć grupę zadań: pierwsze zadanie będzie czyścić katalog, a drugie będzie wykonywać użyteczną pracę.

Dla przykładu, jako użyteczną pracę wybierzmy minifikację CSS.

Podłączmy wszystko, co potrzebne:

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

Zróbmy zadanie do czyszczenia katalogu dist:

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

Zróbmy zadanie do minifikacji CSS:

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

Wykonajmy serię zadań:

exports.default = series(taskDel, taskCss);

Zbierzmy wszystko razem i otrzymamy następujący kod:

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

exports.default = series(taskDel, taskCss);

Wykonaj zadanie do minifikacji JavaScript. Czyść katalog przed każdym uruchomieniem zadania.

Wykonaj grupę z trzech zadań: zadanie do czyszczenia katalogu, zadanie do minifikacji CSS i zadanie do minifikacji JavaScript. Określ, które zadania powinny być wykonywane sekwencyjnie, a które - równolegle.