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:

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

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

Zróbmy zadanie do czyszczenia katalogu dist:

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

Zróbmy zadanie do minifikacji CSS:

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

Wykonajmy serię zadań:

javascriptexports.default = series(taskDel, taskCss);

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

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

exports.default = series(taskDel, taskCss);