Detaillierte Erläuterung der Verwendung von Gulp.js, einem leistungsstarken Tool für die Front-End-Aufgabenerstellung

Überblick

In der Softwareentwicklung liegen die Vorteile von Task Runnern auf der Hand. Sie können bei der Automatisierung allgemeiner und langwieriger Aufgaben helfen, sodass Sie sich auf wichtigere Dinge konzentrieren können, beispielsweise das Schreiben von tollem Code. Im Ernst: Die Möglichkeit, Aufgaben wie Bildkomprimierung, Code-Minimierung, Komponententests und mehr zu automatisieren, spart wirklich Zeit.

Für viele Front-End-Entwickler ist Grunt heutzutage der am häufigsten verwendete Task-Manager, ein Tool, mit dem Sie verschiedene laufende Aufgaben mit JavaScript in der Datei Gruntfile.js definieren können. Sofern Sie sich mit JavaScript auskennen, ist das Erstellen einer Grunt-Aufgabe grundsätzlich sehr einfach und unkompliziert. Umfangreiche Plug-Ins von Drittanbietern wie jsHint, Sass und Uglify machen Grunt zu einem der erweiterbarsten Tools.

Für die meisten Leute war Grunt schon immer der Taskrunner der Wahl. In letzter Zeit hat jedoch ein Tool namens Gulp.js viel Aufmerksamkeit auf sich gezogen, da es leicht zu installieren ist und eine äußerst einfache Konfigurationsdatei aufweist, die leichter zu lesen und zu verwalten ist.

Installieren Sie Gulp.js

Gulp.js ist wie Grunt ein auf Node basierendes Tool zur Aufgabenausführung. Sie müssen Node installieren, um es auszuführen. Abhängig von Ihrem Betriebssystem gibt es verschiedene Möglichkeiten, Gulp zu installieren. Unter OS X verwende ich nvm, ein großartiges Skript von Tim Caswell zum Verwalten mehrerer Node.js-Versionen. Sie können die Binärdatei auch direkt von der offiziellen Node.js-Website herunterladen. Wenn Sie nichts über Node wissen, empfehle ich Ihnen, sich zunächst mit der Nettuts+-Reihe vertraut zu machen.

Wir können Gulp schnell mit npm (Node Package Manager) installieren. Öffnen Sie Ihr Terminal und geben Sie ein:

npm install -g gulp

Dieser Befehl ruft Gulp aus dem NPM-Register ab und installiert es global auf Ihrem System, sodass Sie direkt über die Befehlszeile darauf zugreifen können.

Nachdem Gulp nun installiert ist, können wir es in unserem Projekt verwenden.

Erstellen Sie Ihr Projekt mit Gulp.js

Um Gulp in Ihrem Projekt zu verwenden, müssen Sie die folgenden wichtigen Punkte erfüllen:

• Installieren Sie zwei abhängige Pakete
• Installieren Sie alle Plugins, die Sie verwenden möchten
• Erstellen Sie eine Gulp.js-Datei und definieren Sie die Aufgaben, die Sie ausführen möchten

Bitte ergänzen Sie die oben genannten Punkte im Projektpfad, damit Gulp Ihre Konfigurationsdatei nutzen kann.

Installieren Sie zuerst die Abhängigkeitspakete:

npm install --save-dev gulp gulp-util

Jetzt müssen wir das Gulp-Plugin installieren, das die in der Konfigurationsdatei definierten Aufgaben ausführt. Bei diesen Plugins handelt es sich um Node-Pakete, daher verwenden wir zur Installation erneut npm.

npm installieren --save-dev gulp-uglify gulp-concat

Ich habe hier zwei Plugins installiert, die es mir ermöglichen, mit dem Uglify.js-Kompressor JavaScript-Code zu minimieren/komprimieren und mehrere JS-Dateien in einer Datei zusammenzuführen.

Beachten Sie, dass ich hier --save-dev verwendet habe, wodurch ich Gulp-Abhängigkeiten und -Plugins nur im aktuellen Projekt installieren kann. Dadurch werden entsprechende Einträge für jede Abhängigkeit in der Liste „devDependencies“ in package.json generiert. Wie unten dargestellt:

{
  "devAbhängigkeiten": {
    "gulp-util": "~2.2.13",
    "Schluck": "~3.5.0",
    "gulp-uglify": "~0.2.0",
    "Schluck-Verkettung": "~2.1.7"
  }
}

Dadurch wird sichergestellt, dass alle Abhängigkeiten und Plug-Ins für Ihr Projekt mit npm installiert werden. Sollte in deinem Projekt keine package.json Datei vorhanden sein, gib in der Kommandozeile npm init ein oder erstelle einfach manuell eine in einem Editor, füge die entsprechenden geschweiften Klammern ein und speichere sie anschließend als „package.json“. Geben Sie den npm-Befehl in die Befehlszeile ein, um es zu aktualisieren. Beachten Sie, dass die geschweiften Klammern erforderlich sind. Andernfalls wird bei der Verwendung von --save-dev npm ein Fehler ausgegeben, der besagt, dass es sich nicht um eine gültige JSON-Datei handelt.

Obwohl ich in diesem Handbuch nur zwei Plugins verwendet habe, bietet Gulp über 200 Plugins für unterschiedliche Funktionsanforderungen, darunter:

• LiveNeuladen (gulp-livereload)
• JSHint (Schluck-jshint)
• Sass (schluck-Sass)
• CoffeeScript-Dateikompilierung (gulp-coffee)

Es gibt noch viele mehr ...

Gulpfile.js

Wie Grunt verfügt Gulp über eine Konfigurationsdatei namens gulpfile.js, die alle zum Ausführen von Aufgaben erforderlichen Plugins definiert. Sie sollten diese Datei im Stammverzeichnis Ihres Projekts erstellen.

Durch die einfache und unkomplizierte Syntax sind Gulp-Dateien sehr leicht zu lesen und zu verstehen:

var gulp = erfordern('gulp'),
gutil = erforderlich('gulp-util'),
uglify = erfordern('gulp-uglify'),
concat = erforderlich('gulp-concat');

Der obige Code teilt Gulp einfach mit, auf welche Plugins verwiesen werden muss, um die angegebene Aufgabe abzuschließen.

Als Nächstes müssen wir die Aufgaben definieren, die Gulp ausführen wird. Hier definiere ich zwei:

• Bilder komprimieren
• Minimieren Sie JS-Dateien

Wir verwenden die Gulp-Methode task(), um die auszuführende Aufgabe zu definieren:

gulp.task('js', Funktion () {
    gulp.src('./js/*.js')
        .pipe(hässlich machen())
        .pipe(concat('alle.js'))
        .pipe(gulp.dest('./js'));
});

Wenn man sich den obigen Code ansieht, wird ein gemischter Methodenaufruf verwendet, der aus referenzierten Plugins besteht. Die erste Methode, task(), verwendet einen Namen, um die aktuelle Aufgabe darzustellen (hier wird sie „js“ genannt), und eine anonyme Methode, um den eigentlichen Vorgang zu kapseln. Lassen Sie uns den Code aufschlüsseln:

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

Die Methode src() gibt an, wo die zu komprimierende JS-Datei zu finden ist, und konvertiert sie in einen Datenstrom, der die Dokumentstruktur enthält, die an das nachfolgend ausgeführte Plug-In übergeben werden soll. Dies ist Teil der Node.js Streams API und einer der Gründe, warum Gulp eine prägnante API-Syntax hat.

.pipe(hässlich machen())

Die Methode pipe() ruft den von der Methode src() übergebenen Datenstrom ab und übergibt ihn dann an das angegebene Plug-In. Im aktuellen Beispiel wird der Datenstrom vom Plugin uglify empfangen.

.pipe(concat('alle.js'))

Wie uglify empfängt das Concat-Plugin den durch pipe() übergebenen Datenstrom und fügt dann mehrere JS-Dateien zu „all.js“ zusammen.

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

Schließlich verwenden wir die dest()-Methode von Gulp, um all.js in das angegebene Verzeichnis zu schreiben. Der gesamte Vorgang ist prägnant und leicht zu lesen.

Eine letzte Sache müssen wir noch tun: Wir müssen die Standardaufgabe von Gulp so ändern, dass „js“ ausgeführt wird.

gulp.task('Standard', Funktion(){
    gulp.run('js'); 
});

Kehren Sie zur Befehlszeile zurück und geben Sie „gulp“ ein. Gulp findet die Datei gulpfile.js, lädt alle Abhängigkeiten und Plugins und führt die Standardaufgabe „js“ aus. Im endgültigen Laufergebnis können Sie sehen, dass die Dateien komprimiert und zusammengeführt werden.

Gehen wir einen Schritt näher. Gulp bietet eine weitere Methode namens watch(), die Änderungen an angegebenen Ressourcen überwachen kann. Anstatt zum Ausführen der Aufgabe manuell „gulp“ einzugeben, können Sie mit dieser Methode die Aufgabe basierend auf Ressourcenänderungen automatisch ausführen.

gulp.watch('./js/*', Funktion () {
     gulp.run('js');
});

Wenn der obige Code ausgeführt wird, überwacht Gulp weiterhin die angegebene Ressource und führt die Methode „js“ erneut aus, sobald sich die Ressource ändert. Diese Funktion ist großartig!

Umstellung auf Gulp.js

Als ich zum ersten Mal von Gulp hörte, war meine erste Reaktion: „Noch ein fantastisches Tool!“. Gulp.js verfügt über eine attraktive Syntax und API, die das Erstellen von Aufgaben zum Kinderspiel macht. Obwohl sie nicht so umfangreich ist wie die Plugin-Bibliothek von Grunt, scheint sie täglich zu wachsen, insbesondere jetzt, da sich so viele Entwickler dafür interessieren.

Oben finden Sie den ausführlichen Inhalt des Gulp.js-Nutzungshandbuchs, einem leistungsstarken Tool für die Erstellung von Front-End-Aufgaben. Weitere Informationen zum Gulp.js-Nutzungshandbuch finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!