Gulp – Automatisierung von Tasks

Was ist Gulp?

Gulp ist ein auf Node.js basierendes Tool, welches Programmieren erlaubt wiederkehrende Aufgaben zu automatisieren.

Beispiele hierfür sind z.B.

• Bei Änderung eines SASS Files das CSS neu generieren
• Bei Änderung eines JS Files das JS neu generieren
• Bei Änderung eines beliebigen Files einen bestimmten Order auf einen Server hochladen
• Abhängig von einer Variable das generierte CSS zu minifien
• Abhängig von einer Variable Sourcemaps für JS und CSS generieren

Gulp 3 vs Gulp 4

Aktuell (November 2019) ist die neueste Version von Gulp 4.0.0
Diese ist ein „breaking change“ im Vergleich zu den vorher verwendeten Versionen 3.X

Was hat sich im Vergleich zu Gulp 3 geändert?

Gulp 4 hat das darunterliegende „Task“-System geändert, welches es nun erlaubt Tasks parallel auszuführen.

D.h. mit dem folgenden Task „default“ führt Gulp die Tasks „sass“ und „scripts“ parallel aus:

gulp.task('default', gulp.parallel('sass', 'scripts'));

Neben „gulp.parallel“ gibt es ebenso „gulp.series„

gulp.task('default', gulp.series('lint', gulp.parallel('sass', 'scripts'), 'deploy'));

Wie hier zu sehen wird zuerst der Task „lint“ ausgeführt. Wenn dieser erfolgreich durchgeführt wurde werden die Tasks „sass“ und „scripts“ parallel ausgeführt und final der Task „deploy„

Um Tasks innerhalb eines anderen Tasks auszuführen kann dies wie folgt durchgeführt werden:

(gulp.parallel('sass', 'scripts'))();

Wie diese Funktionalität zu einem recht mächtigen Setup führt wird im Beitrag Gulp Beispiel genauer erklärt.