Bereinigung des Ordners vor dem Speichern in Gulp

Sie haben sicherlich bereits bemerkt, dass Gulp beim Speichern von Dateien in einen Ordner die vorherigen Dateien darin nicht löscht.

Damit dies geschieht, muss ein spezielles Plugin installiert werden: del.

Installieren wir es, indem wir den folgenden Befehl ausführen:

npm install del --save-dev

Dieses Plugin unterscheidet sich von den zuvor von uns verwendeten dadurch, dass es außerhalb der Kette von pipe-Methoden verwendet wird. Daher müssen wir in diesem Fall eine Gruppe von Tasks erstellen: der erste Task dient zur Bereinigung des Ordners, und der zweite erledigt die eigentliche Arbeit.

Nehmen wir für das Beispiel als eigentliche Arbeit die Minimierung von CSS.

Lassen Sie uns alles Notwendige einbinden:

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

Erstellen wir einen Task zur Bereinigung des Ordners dist:

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

Erstellen wir einen Task zur Minimierung von CSS:

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

Führen wir eine Serie von Tasks aus:

exports.default = series(taskDel, taskCss);

Fassen wir alles zusammen und erhalten folgenden Code:

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

exports.default = series(taskDel, taskCss);

Erstellen Sie einen Task zur Minimierung von JavaScript. Bereinigen Sie den Ordner vor jedem Start des Tasks.

Erstellen Sie eine Gruppe aus drei Tasks: einen Task zur Bereinigung des Ordners, einen Task zur Minimierung von CSS und einen Task zur Minimierung von JavaScript. Legen Sie fest, welche Tasks sequentiell und welche - parallel ausgeführt werden sollen.