Share
Die Vorteile von Task-Läufern in der Softwareentwicklung liegen auf der Hand. Sie helfen dabei, häufige, oft langwierige Aufgaben zu automatisieren und Sie können sich direkt auf wichtigere Dinge konzentrieren, z. B. aufregenden Code. Im Ernstfall ist die Möglichkeit, Aufgaben wie Bildkomprimierung, Minification, Komponententests und vieles mehr zu automatisieren, eine enorme Zeitersparnis.
Für viele Front-End-Entwickler war Grunt der bisherige Tasko Runner, mit dem Sie Ihre Aufgaben mithilfe von JavaScript in einer Datei namens Gruntfile.js (AKA a Gruntfile) definieren konnten. Wenn Sie sich mit JavaScript auskennen, war das Einrichten einer Grunt-Aufgabe im Grunde ein recht unkomplizierter Prozess, und die Bandbreite der Plugins von Drittanbietern für andere Tools wie JSHint, Sass und Uglify macht es zu einem der flexibelsten Tools, die verfügbar sind.
Grunt war größtenteils die erste Wahl, aber vor kurzem hat eine neue namens Gulp.js wegen ihrer einfachen Einrichtung und ihres unglaublich einfachen Konfigurationsdateiformats viel Aufmerksamkeit auf sich gezogen, wodurch sie leicht lesbar und handhabbar ist.
In diesem Tutorial zeige ich Ihnen, wie Sie Gulp installieren und eine einfache Konfigurationsdatei erstellen, um Ihre Füße mit diesem großartigen neuen Task Runner nass zu machen.
Gulp.js ist ein knotenbasierter Task-Runner wie Grunt. Daher müssen Sie Node.js installieren, um sie verwenden zu können. Dies kann auf verschiedene Arten erfolgen, insbesondere abhängig von Ihrem Betriebssystem. Da ich auf OS X bin, entschied ich mich für nvm, das fantastische Skript von Tim Caswell, um mehrere Versionen von Node.js zu verwalten. Sie können die Binärdateien auch direkt von der Node.js-Site herunterladen. Wenn Sie Node.js noch nicht kennen, sollten Sie unbedingt die Serie Nettuts + lesen, um sich über Node.js auf dem Laufenden zu halten.
Gulp.js wird als Knotenmodul geliefert, was die Installation mit npm (Node Package Manager) sehr einfach macht. Um Gulp zu installieren, öffnen Sie Ihr Terminal und geben Sie Folgendes ein:
npm install -g gulp
Dies zieht Gulp aus dem npm registrieren und konfigurieren Sie es global auf Ihrem System, sodass Sie über die Befehlszeile darauf zugreifen können.
Gulp.js ist an dieser Stelle installiert, und Sie können mit Ihren Projekten beginnen.
Um Gulp in Ihrem Projekt zu verwenden, gibt es einige wichtige Dinge, die getan werden müssen:
Diese Schritte müssen im Verzeichnis Ihres Projekts ausgeführt werden, damit die Pakete und Konfigurationsdateien für Gulp verfügbar sind.
Lassen Sie uns zunächst die Abhängigkeiten installieren:
npm install --save-dev gulp gulp-util
Nun müssen wir die Gulp-Plugins installieren, die die Aufgaben ausführen, die wir in unserer Konfigurationsdatei definieren. Diese Plugins sind auch Node-Paketmodule, also verwenden wir sie npm um sie wieder zu installieren.
npm install --save-dev gulp-uglify gulp-concat
In meinem Fall installiere ich zwei Plugins, mit denen ich meinen JavaScript-Code mithilfe des Uglify.js-Kompressors minimieren / komprimieren und alle meine JavaScipt-Dateien in einer einzigen Quelldatei verketten kann.
Beachten Sie, dass ich die --save-dev Flag für die Installation der Gulp-Abhängigkeiten und der Plugins, die ich für mein Projekt benötige. Dies stellt sicher, dass für jeden ein Eintrag in meine devDependencies-Liste in my aufgenommen wird package.json Datei wie folgt:
"devDependencies": "gulp-util": "~ 2.2.13", "gulp": "~ 3.5.0", "gulp-uglify": "~ 0.2.0", "gulp-concat": " ~ 2.1.7 "
Dadurch wird sichergestellt, dass Paketabhängigkeiten für dieses Projekt später mit npm problemlos installiert werden können. Wenn Sie keine haben package.json Datei in Ihrem Projekt, geben Sie einfach ein npm init In der Befehlszeile oder öffnen Sie eine neue Datei in Ihrem Editor, schließen Sie geschweifte Klammern ein und speichern Sie sie als "package.json". Dann wiederholen Sie die npm Die oben aufgeführten Befehle zum Aktualisieren. Beachten Sie, dass das Hinzufügen der geschweiften Klammern erforderlich ist. Ansonsten, wenn Sie versuchen, die --save-dev Flagge, npm gibt eine Fehlermeldung aus, die besagt, dass es keine gültige JSON-Datei ist.
Während ich nur zwei Plugins für mein Tutorial verwende, bietet Gulp über 200 Plugins für alle Arten von Funktionen an, einschließlich:
und viele mehr.
Wie Grunt verfügt auch Gulp über eine gleichnamige Konfigurationsdatei gulpfile.js das definiert alle erforderlichen Plugins und die Aufgaben, die Sie ausführen. Sie müssen eine Datei erstellen, die im Stammverzeichnis Ihres Projektordners aufgerufen wird.
Die Syntax ist unkompliziert und knapp und macht sie sehr lesbar und leicht verständlich:
Accentsconagua
var gulp = required ('gulp'), gutil = required ('gulp-util'), uglify = required ('gulp-uglify'), concat = required ('gulp-concat'); Dadurch wird Gulp lediglich mitgeteilt, welche Plugins zur Ausführung der definierten Aufgaben erforderlich sind.
Als nächstes müssen wir die Aufgaben definieren, die von Gulp ausgeführt werden. In meinem Fall versuche ich zwei Dinge zu tun:
Das Definieren einer Aufgabe ist in jedem Fall ein JavaScript-Aufruf. Wir verwenden die Gulp-Methode Aufgabe() um die Aufgabe zu definieren, die wir ausführen wollen:
gulp.task ('js', function () gulp.src ('./js / *. js') .pipe (uglify ()) .pipe (concat ('all.js')) .pipe (gulp. dest ('./js'));); Wenn Sie sich den Code oben ansehen, gibt es eine Mischung aus Methodenaufrufen aus den Plugins, die ich je nach Bedarf angegeben habe. Die erste Methode, Aufgabe(), nimmt einen semantischen Namen für die Aufgabe (in diesem Fall 'js') und eine anonyme Funktion, die das echte Fleisch enthält. Lassen Sie uns den Code aufschlüsseln:
gulp.src ('./js / * .js') Das src () Lassen Sie mich als Methode angeben, wo die zu komprimierenden JavaScript-Dateien zu finden sind, und diese in einen Stream umwandeln, der eine Dateistruktur darstellt, die zur Verarbeitung an die Plugins übergeben werden kann. Dies ist Teil der Streams-API von Node.js und einer der Gründe für die Fähigkeit von Gulp, eine solch knappe und prägnante API-Syntax zu verwenden.
.Rohr (uglify ())
Das Rohr() Die Methode nimmt den von der Quelle abgeleiteten Quellstrom src () und übergibt sie an das spezifische Plugin, auf das verwiesen wird. In diesem Beispiel würde das uglify-Plugin den Quellstream empfangen.
.Pipe (concat ('all.js')) Das Concat-Plugin empfängt den Quell-Stream wie Rohr() Methode und verkettet alle JavaScript-Dateien in einer Datei namens "all.js"
.Pipe (gulp.dest ('./js')); Schließlich mit Gulp dest () Methode, all.js wird in meinen Zielordner geschrieben. Der Prozess ist sehr einfach und sehr gut lesbar.
Das letzte, was wir tun müssen, ist die Standard-Gulp-Aufgabe zu aktualisieren, um unsere "js" -Aufgabe auszuführen.
gulp.task ('default', function () gulp.run ('js');); Gehen Sie zur Befehlszeile zurück und tippen Sie ein 'Schluck', Gulp findet die gulpfile.js Datei, lädt alle erforderlichen Plugins und Abhängigkeiten, startet die Standardaufgabe und führt meine aus 'js' Aufgabe. Das Endergebnis der Minifizierung und Verkettung meiner jQuery-JavaScript-Datei finden Sie hier:
Um dies noch einen Schritt weiter zu gehen, bietet Gulp eine weitere Methode namens sehen() Damit können Sie eine bestimmte Ressource automatisch auf Änderungen überprüfen. Dies ermöglicht eine weitgehende Automatisierung von Aufgaben, anstatt ständig manuell eingetippt zu werden 'Schluck' in der Befehlszeile.
gulp.watch ('./js / *', function () gulp.run ('js');); Wenn dies ausgeführt wird, überwacht Gulp die angegebenen Dateien weiterhin direkt auf Änderungen an den Dateien 'js' Aufgabe, die JavaScript-Dateien zu minimieren und zu verketten. Sehr cool!
Als ich anfangs von Gulp hörte, war meine erste Reaktion "Oh Bruder, ein anderes Werkzeug!". Junge war ich aus. Gulp.js hat wirklich eine überzeugende Syntax und API, die das Einrichten Ihrer Aufgaben zum Kinderspiel macht. Obwohl es nicht die Breite der Plugins hat, die Grunt hat, scheint sein Plugin-Repository um einen schönen Clip zu wachsen, besonders jetzt mit so viel Entwicklerinteresse.
Ich habe bereits mit vielen Entwicklern gesprochen, die aktiv darauf migrieren. Es scheint also ein guter Zeitpunkt für Gulp.js zu sein.
