Καθαρισμός φακέλου πριν την αποθήκευση στο Gulp

Είδατε πιθανώς ήδη ότι όταν αποθηκεύονται αρχεία σε ένα φάκελο, το Gulp δεν διαγράφει τα προηγούμενα αρχεία από αυτόν.

Για να συμβαίνει αυτό, χρειάζεται να εγκαταστήσετε το ειδικό plugin del.

Ας το εγκαταστήσουμε, εκτελώντας την ακόλουθη εντολή:

terminalnpm install del --save-dev

Αυτό το plugin διαφέρει από αυτά που χρησιμοποιήσαμε παλαιότερα στο ότι χρησιμοποιείται εκτός της αλυσίδας μεθόδων pipe. Επομένως, σε αυτήν την περίπτωση πρέπει να δημιουργήσουμε μια ομάδα tasks: το πρώτο task θα αφορά τον καθαρισμό του φακέλου, και το δεύτερο θα κάνει τη χρήσιμη δουλειά.

Για παράδειγμα, ας επιλέξουμε ως χρήσιμη δουλειά τη μείωση του CSS.

Ας συνδέσουμε ό,τι είναι απαραίτητο:

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

Ας φτιάξουμε ένα task για τον καθαρισμό του φακέλου dist:

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

Ας φτιάξουμε ένα task για τη μείωση του CSS:

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

Ας εκτελέσουμε μια σειρά από tasks:

javascriptexports.default = series(taskDel, taskCss);

Ας τα βάλουμε όλα μαζί και πάρουμε τον ακόλουθο κώδικα:

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

exports.default = series(taskDel, taskCss);