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

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

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

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

npm install del --save-dev

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

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

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

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

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

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

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

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

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

exports.default = series(taskDel, taskCss);

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

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

exports.default = series(taskDel, taskCss);

Φτιάξτε ένα task για τη μείωση του JavaScript. Καθαρίστε το φάκελο πριν από κάθε εκτέλεση του task.

Φτιάξτε μια ομάδα από τρία tasks: ένα task για τον καθαρισμό του φακέλου, ένα task για τη μείωση του CSS και ένα task για τη μείωση του JavaScript. Προσδιορίστε ποια tasks πρέπει να εκτελούνται διαδοχικά, και ποια - παράλληλα.