Um Gulp nutzen zu können, müssen einige Voraussetzungen geschaffen werden. Dazu gehört die Installation von NodeJS, das für das Kompilieren und Erstellen von Javascript-Projekten allgemein sehr nützlich ist.

Die Installation von NodeJS funktioniert sehr einfach über den Installations-Client, den ihr euch unter nodejs.org herunterladen könnt. Nach erfolgreicher Installation legt ihr eine package.json-Datei im Projektordner an. Dazu müsst ihr den Befehl npm init in der Konsole oder im Terminal ausführen. Als nächstes installiert ihr Gulp global auf dem Mac oder PC über den Befehl:

npm install gulp -g

Mit der globalen Installation von Gulp auf eurem Computer könnt ihr das Programm nun von jedem Verzeichnis aus per Konsolenbefehl starten.

Als nächstes benötigt ihr die npm-Pakete browserify, gulp-browserify und reactify. Das Paket browserify wird mit demselben Installationsbefehl installiert: npm install browserify -g. Bei gulp-browserify und reactify wird dieser noch um das Befehlsattribut --save ergänzt, um die Pakete als Abhängigkeit in package.json zu installieren.

Anschließend erstellt ihr in eurem Projektordner eine Gulp-Datei, indem ihr einfach eine leere Javascript-Datei mit dem Namen „gulpfile“ speichert. Die ersten Zeilen dieser Datei beinhalten die Require-Anweisungen für die Pakete gulp, gulp-browserify und reactify.

Jetzt folgt euer erster Gulptask:

gulp.task(‘react’, function(){

//Content

});

Dieser Task führt alles aus, was für das Kompilieren des React-Projekts notwendig ist. Browserify hilft hier dabei, die Require-Anweisungen, die wir von NodeJS kennen, zu verwenden und anschließend trotzdem unsere Applikation im Browser auszuführen zu können. Reactify dagegen kompiliert den JSX-Code.

Gulp nutzt dafür das simple Prinzip von „Pipes“, zu Deutsch „Röhren“, durch die der Code geschleust wird, um verschiedene Plugins zu nutzen, die den Code kompilieren oder modifizieren.

Wie das Vorbild im echten echten Leben hat jede Pipe einen Anfang und ein Ende. Was zu Beginn hineinfließt, muss irgendwo auch wieder herausfließen.

Gulp nutzt hierfür die zwei APIs .src() und .dest().

gulp.src('src/app.js')

.pipe(browserify({

insertGlobals: false,

debug: true,

transform: [reactify]

}))

.pipe(gulp.dest('./dist/js'));

Bei der .src()-Methode übergeben wir den Pfad an unsere Javascript-Datei, die wir kompilieren wollen, und fügen danach mit .pipe() unser „Rohr“ hinzu, an das wir browserify() als Parameter übergeben, um unsere Datei zu kompilieren. Am Ende legen wir mit .pipe(gulp.dest()) den Pfad fest, unter dem unsere kompilierte Datei gespeichert werden soll.

Bevor wir nun unser Gulp-Skript starten können, benötigen wir noch einen Watch-Task. Dieser Task überwacht unsere Datei auf jede Änderung und führt dann unseren React-Task aus:

gulp.task(“watch”, function(){

gulp.watch([“src/**/*.js”,” src/**/*.jsx”], [“react”]);

})

Der erste Parameter unserer Watch-Methode erwartet den Pfad zu unserer .js- oder .jsx-Datei, die wir überwachen wollen. Indem wir *.js und *.jsx schreiben, überwachen wir jeden Typ dieser Dateien. Im zweiten Parameter übergeben wir unseren Task, der bei einer Änderung zur Ausführung kommen soll. Hierbei lassen sich auch mehrere Tasks übergeben. Damit wir unsere Gulp-Datei mit dem einfachen Befehl gulp ausführen können, benötigen wir einen Default-Task:

gulp.task(“default”, [“watch”]);

Führen wir nun gulp in unserer Konsole oder im Terminal aus, wird unsere React-Applikation kompiliert und ihr könnt sie im Browser ausführen.

Autor des Artikels ist Philipp Rost

Ebenfalls interessant: Statt Grunt, Gulp und Co – Wie man npm als Build-Tool verwendet