Share
Wenn Sie mit der Frontend-Entwicklung noch nicht vertraut sind und HTML5, CSS und JavaScript beherrschen, liegt der nächste Schritt auf Ihrer Hand Werkzeugedass die meisten Entwickler in diesem komplexen Raum vernünftig bleiben. Auch Sie verdienen mehr Flexibilität und Funktionen beim Schreiben Ihrer CSS-Tabellen, indem Sie Weniger verwenden. Sie verdienen es auch, die Bandbreite zu optimieren, indem Sie Ihren JS-Code minimieren. Auch Sie verdienen es, mit JSHint automatisch prüfen zu können, ob Ihr JS-Code gut ist.
Du verdienst all dieses gute Zeug.
Sie verwenden also all diese großartigen Tools von Hand und führen immer mehr Befehlszeilen von Hand aus. Manchmal vergessen Sie, den Less-Compiler auszuführen. Manchmal vergessen Sie, JSHint auszuführen, und ein Fehler wird versandt.
Und plötzlich wundern Sie sich: Gibt es eine Lösung, um all diese Tools zu automatisieren? Wie können Sie einen wiederholbaren Workflow erstellen, um Fehler zu vermeiden?
Offensichtlich gibt es eine Lösung und insbesondere zwei Tools warten auf Ihren Start: Grunzen und Schluck.
Als Neuling, der diese Tools verwendet, wundern Sie sich, wie sie funktionieren und welche Sie verwenden sollen, nicht wahr? Nun, perfekt, dann lesen Sie den richtigen Artikel!
Ich werde Ihnen die Grundlagen für die Verwendung von Grunt und Gulp geben, anhand eines wirklich einfachen Beispiels, das Sie von GitHub herunterladen können.
Es ist eine einfache Website, die aus drei Dateien besteht:
Styles.less definiert die CSS-Tabelle auf eine umfassendere Weise, als dies mit einer Standard-CSS-Datei möglich ist. Am Ende verwenden wir den Less-Compiler, um eine styles.css Datei. Mit Less können wir beispielsweise Variablen in der CSS-Datei verwenden:
Weitere Informationen zu Less finden Sie in dieser Kurzanleitung.
Der JavaScript- und HTML-Code ist sehr einfach. Die Seite sollte so aussehen:
Sie müssen zuerst verstehen, wie der Node.js Package Manager (npm) funktioniert.
Npm ist das mit Node.JS zur Verfügung gestellte Werkzeug. Es wird verwendet, um Werkzeuge und Frameworks abzurufen und ihre Abhängigkeiten automatisch aufzulösen.
Um Less zum Beispiel zu verwenden und in eine webfähige CSS-Datei zu kompilieren, müssen Sie Less mit folgendem Befehl installieren:
npm install -g less
Hinweis: Um die Befehlszeile von npm zu erhalten, müssen Sie Node.js von der Node-Website installieren.
Sobald dies erledigt ist, können Sie diesen Befehl ausführen, um .less-Dateien in .css zu kompilieren:
lessc styles.less> styles.css
Npm verwendet eine Datei, die es erstellt und in dem lokalen Ordner speichert, in dem es arbeitet: package.json. Diese Datei verwendet das JSON-Format (JavaScript Object Notation), um npm mitzuteilen, welches Tool und welche Version installiert sind und welche Frameworks vom aktuellen verwendet werden Projekt (was durch den aktuellen Ordner repräsentiert wird).
Diese Datei ist wichtig für Grunt und Gulp, da sie die Liste der herunterzuladenden Plugins enthält, die in Ihrem Automatisierungsworkflow verwendet werden können.
Um eine leere package.json-Datei zu erstellen, können Sie den folgenden npm-Befehl verwenden:
npm init
Sie werden einige Fragen durchgehen, die Sie mit der Standardoption beantworten können. Anschließend können Sie mit dem Start beginnen.
In dieser Datei haben Sie zwei Arten von Abhängigkeiten:
Npm bietet Ihnen drei Möglichkeiten, Pakete zu installieren:
Accentsconagua
-G oder -global Möglichkeit--save-dev MöglichkeitDer dritte wird einen erstellen devDependencies Abschnitt / Eigenschaft in der package.json-Datei.
Grunt ist ein Pionier im Bereich der JavaScript-Automatisierung. Es gibt viele bekannte Grunt-Benutzer wie Twitter, jQuery und Modernizr.
Das Grundprinzip für Grunt besteht darin, uns einen einfachen Weg zum Laufen zu geben Aufgaben. Eine Aufgabe besteht aus einer Reihe von Codedateien und Konfigurationsdateien, die bereits für Sie erstellt wurden. Sie können neue Aufgaben erhalten, indem Sie Grunt-Plugins installieren, die Sie mit npm erhalten. Sie können ein Plugin für so ziemlich jedes Werkzeug finden, das Sie verwenden könnten, wie Less und JSHint.
Um Grunt auszuführen, müssen Sie eine Gruntdatei erstellen, in der Sie die auszuführenden Aufgaben und die Konfiguration für jede einzelne angeben. Sobald dies erledigt ist, müssen Sie nur noch das ausführen grunzen Befehlszeile, die die Aufgabe angibt, die Sie ausführen möchten (Standard oder eine bestimmte), und diese Aufgabe wird automatisch ausgeführt.
Lassen Sie uns nun eine Schritt-für-Schritt-Anleitung durchgehen, um all das einzurichten.
Verwenden Sie npm, um die Datei zu starten:
npm init
Sie müssen einige Fragen wie den Projektnamen und die standardmäßige .js-Datei beantworten. Sie können die Datei auch manuell erstellen und für den Inhalt Folgendes festlegen:
"name": "Projektname", "devDependencies": , "Abhängigkeiten":
Sie müssen Grunt global installieren, um die Befehlszeile abzurufen, und lokal alles initialisieren, was für das Projekt erforderlich ist.
Lauf:
npm install -g grunt
Dann führen Sie es lokal aus:
npm install grunt --save-dev
Hinweis: Vergessen Sie nicht das -dev Teil, damit es als einer der angegeben wird devDependencies in dem package.json Datei.
Grunt arbeitet mit einer Datei namens gruntFile.js. Diese Datei enthält alles, was Grunt benötigt, das heißt:
Grunt erwartet, dass die Datei eine einzelne Funktion exportiert, für die ein Parameter namens "grunt" benötigt wird. Sie verwenden dieses Objekt, um alle relativen Grunt-Aktionen auszuführen.
Hier ist eine minimale Gruntdatei, die nur die package.json-Datei liest und eine Standard Aufgabe, die nichts läuft.
Hinweis: Platzieren Sie die Datei im Projektordner neben der package.json-Datei.
module.exports = Funktion (Grunzen) // Projektkonfiguration. grunt.initConfig (pkg: grunt.file.readJSON ('package.json'),); // Standardaufgabe (n). grunt.registerTask ('default', []); ; Sie können es ausführen, um sicherzustellen, dass alles korrekt konfiguriert ist.
Öffnen Sie dazu eine Eingabeaufforderung im Projektordner und führen Sie Folgendes aus:
grunzen
Sie sollten so etwas sehen:
Nun, da Ihre Gruntdatei bereit ist, müssen Sie als Nächstes ein Plugin hinzufügen und verwenden. Alle Plugins finden Sie in der Auflistung auf der Grunt-Website. Eine der häufigsten Aufgaben, die in einer Gruntdatei ausgeführt werden, ist das Prüfen, ob die JavaScript-Syntax korrekt ist. Dazu verwenden wir normalerweise JSHint.
Fügen wir dies Ihrem grunzigen Workflow hinzu.
Wenn Sie auf der Seite "grunt plugins" nach JSHint suchen, finden Sie grunt-contrib-jshint, was dem entspricht, was wir brauchen!
Führen Sie im Projektordner Folgendes aus:
npm install grunt-contrib-jshint --save-dev
Sobald dies geschehen ist, müssen Sie es in Ihre Gruntfile.js einfügen. Dafür gibt es zwei einfache Schritte:
Um das Plugin zu laden, verwenden Sie die loadNpmTasks Funktion:
// Lade das Plugin, das die Task "jshint" bereitstellt grunt.loadNpmTasks ('grunt-contrib-jshint');Die Konfiguration erfolgt im initConfigFunktion, bei der Sie dem im Parameter angegebenen Objekt eine neue Eigenschaft hinzufügen müssen. Dies muss der Name der Aufgabe sein, die Sie hinzufügen möchten, und bezieht sich auf das von Ihnen verwendete Plugin. Der beste Weg, um den Namen und die Liste der verfügbaren Optionen für die Aufgabe zu erfahren, ist ein Blick auf die Plugin-Dokumentation. Sie finden immer eine gut dokumentierte Probe.
In unserem Beispiel möchten wir beispielsweise alle JavaScript-Dateien mit Ausnahme von gruntfile.js überprüfen. Wir möchten auch eine Reihe von Regeln aktivieren, um die JavaScript-Dateien einchecken zu können eqeqeq um sicherzustellen, dass wir bei Bedarf Triple Equals verwenden.
Hier ist der initConfig Funktion geändert:
Sie können Ihre Aufgabe mithilfe der folgenden Befehlszeile ausführen (in der Sie den Aufgabennamen als Parameter angeben) grunzen):
grunzen jshint
Das Ergebnis ist hier:
Sie müssen diesen Befehl nur ausführen, und Sie werden automatisch nach Fehlern gefragt, die dabei auftreten.
Herzlichen Glückwunsch, Sie haben jetzt eine Aufgabe in Ihrem Grunz-Workflow automatisiert!
Ihre JSHint-Aufgabe funktioniert gut, ist jedoch im Workflow ein bisschen allein. Normalerweise verwenden wir Tools wie Grunt, um mehrere Aufgaben auszuführen.
Es ist sehr einfach, weitere hinzuzufügen, da Sie nur die gleichen Schritte ausführen müssen. Angenommen, Sie möchten jetzt die Kompilierung für Ihre weniger Dateien in den automatisierten Prozess einfügen. Wenn Sie in den Grunt-Plugins suchen, finden Sie eine Grunt-Contrib-less Plugin, das Sie in Ihrem Projektordner installieren können:
npm install grunt-contrib-less --save-dev
Wie bei der JSHint-Task müssen Sie die Konfiguration hinzufügen:
Laden Sie dann die Aufgabe:
Sie können jetzt Grunt ausführen und das angeben Weniger Aufgabe: Dadurch wird nur weniger gestartet. Das ist in Ordnung, aber Sie möchten alle Aufgaben ausführen, oder? Das ist die Rolle der StandardAufgabe.
Wenn du gerade rennst grunzen ohne eine Aufgabe anzugeben, wird nach a gesucht Standard Task und führen Sie alle Tasks aus, die in ihrem Array angegeben sind. Sie können es für die Ausführung ändern Weniger und Jshint. Beachten Sie, dass Sie zum Hinzufügen einer Gruppe von Aufgaben wie Standard, Sie müssen das anrufen registerTaskFunktion:
Ab jetzt, wenn du rennst grunzen, es wird laufen Jshint, und dann Weniger:
Sie können jede gewünschte Aufgabe hinzufügen und auch andere Aufgabengruppen angeben Standard und rufen Sie sie an, indem Sie ihren Namen als Argument an die grunzen Befehlszeile.
Einfach richtig?
Jetzt sind Sie ein glücklicher Entwickler. Alle sich wiederholenden Aufgaben werden in einem grunzigen Workflow automatisiert, und Sie müssen nur grunzen, damit sie ausgeführt werden können. Aber es geht noch einfacher. Dies kann automatisch erfolgen.
Dazu können Sie eine bestimmte Aufgabe mit dem Namen hinzufügen sehen. Diese Aufgabe prüft ständig Ihren Arbeitsordner. Wenn eine Datei geändert wird, führt grunt basierend auf Regeln eine zugehörige Aufgabe aus.
Installieren Sie zuerst sehen in Ihrem Projektordner:
npm install grunt-contrib-watch --save-dev
Laden Sie es wie alle anderen Aufgaben mit der loadNpmTasks Funktion und konfigurieren Sie es. Der Konfigurationsteil ist hier etwas anders, da Sie für jede Aufgabe, die Sie abdecken möchten, eine Konfiguration angeben müssen sehen.
Weitere Informationen finden Sie in der vollständigen Dokumentation zu dieser Aufgabe.
Wenn Sie aktivieren möchten sehen, Sie müssen nur den folgenden Befehl ausführen:
grunzen beobachten
Bei jeder Änderung einer Datei werden Aufgaben ausgeführt, und diese Datei befindet sich im Bereich der für die jeweilige Aufgabe überwachten Dateien.
Und das ist es! Sie wissen jetzt alles, um mit Grunt einen automatisierten Workflow zu erstellen.
Gulp ist eine Alternative zum Grunzen. Es ist etwas jünger und hat den Ruf, flexibler als grunzen zu sein. Bevor Sie sich für einen entscheiden, welchen Sie verwenden möchten, werfen wir einen Blick auf die Funktionsweise von Schluck.
Gulp ist ein Workflow-Automatisierungswerkzeug. Wie Grunt funktioniert es mit npm und der package.json-Datei. Alle verfügbaren Plugins werden auch mit npm heruntergeladen und als hinzugefügt devDependencies in der package.json-Datei.
Einer der Hauptunterschiede ist, dass Gulp Streams verwendet. Ein Stream ist eine Gruppe von Funktionen, durch die eine Datei geleitet und geändert wird in Erinnerung. Die Datei wird erst am Ende des Vorgangs auf die Festplatte geschrieben, sodass sie effizienter ist. Grunt-Aufgaben dagegen arbeiten als Silos und können nicht verkettet werden.
Werfen wir einen kurzen Blick auf die Funktionsweise von Gulp, indem wir einige einfache Schritte ausführen.
Ähnlich wie bei Grunt müssen Sie zuerst die package.json-Datei erstellen. Sie können genau dieselbe Technik verwenden, die Sie für die Gruntprobe verwendet haben.
Nachdem die package.json-Datei erstellt wurde, installieren Sie gulp global und lokal mit:
npm install -g gulp
und
npm install gulp --save-dev
Dadurch wird die gulp-Befehlszeile und alles, was zum Ausführen eines gulp-Workflows benötigt wird, installiert.
Sie müssen dann gulp utils installieren, die allgemeine Funktionen enthalten, die von anderen Plugins gemeinsam genutzt werden:
npm install gulp-util --save-dev
Erstellen Sie schließlich die Mindestgulp-Datei, die folgendermaßen aussehen wird:
Wie Sie sehen, unterscheidet es sich etwas von der Gruntsyntax. In gulp werden Plugins mit dem geladen benötigen Syntax, wie Sie es vielleicht gewohnt sind, wenn Sie ein Node.js-Entwickler sind. Da ist auch ein Standard Aufgabe definiert mit gulp.task Funktion.
Wenn Sie das ausführen SchluckWenn Sie eine Befehlszeile im Projektordner verwenden, sollten Sie ein Ergebnis wie das folgende sehen:
Um ein Plugin in gulp zu verwenden, verwenden Sie dieselbe Funktion wie die, mit der wir das erstellt haben Standard Aufgabe. Dies liegt daran, dass Sie zum Erstellen einer Aufgabe keinen bestimmten Namen verwenden müssen. Sie rufen einfach an gulp.task, Legen Sie den gewünschten Namen fest und geben Sie als zweiten Parameter eine JavaScript-Funktion an. Wenn gulp die Aufgabe ausführt, wird diese Funktion ausgeführt.
Um ein Plugin zu verwenden, rufen Sie es mit dem Namen auf, den Sie bei Bedarf ausgewählt haben. Normalerweise rufen Sie es als Teil eines Streaming-Workflows auf, der in der Regel mit einer Auswahl von Dateien beginnt. Dies geschieht mit der gulp.src Funktion. Es wird eine Reihe von Dateien ausgewählt und ein Stream zurückgegeben, der von einer anderen Funktion verwendet werden kann Rohr. Auf diese Weise können Sie mehrere Aktionen verketten, ohne sie auf die Festplatte zu schreiben. Sie übergeben den Stream einfach von einem Plugin zum anderen.
Hier ist ein einfaches Beispiel für weniger:
Wir zuerst erfordern ("schlucklos") laden die Weniger Plugin für Schluck. (Wir haben es benutzt npm install gulp-less --save-dev).
Dann gulp.src wird alle auswählen .Weniger Dateien, "pfeifen" wir es an die Weniger()Funktion und es ist schließlich "Pipe" zu gulp.destwas anzeigt, wo das Ergebnis geschrieben werden soll. Da gulp.src mehrere Dateien auswählen kann, gibt gulp.dest einen Ordner an.
Sobald Sie das Rohrleitungsmodell verstanden haben, können Sie leicht dasselbe Ergebnis erzielen wie das, das wir mit Grunt erhalten haben.
Die Stärke von gulp besteht darin, dass Sie benutzerdefinierte Aufgaben erstellen können, in denen Sie mehr als ein Plugin aufrufen und diese nach Ihren Wünschen verknüpfen können.
Anmerkung: Es gibt natürlich auch eine Schluckwache Plugin, mit dem Sie den Start Ihres Workflows automatisieren können!
Ich hoffe, Sie haben jetzt ein klareres Verständnis dafür, warum Sie einen Automatisierungsworkflow benötigen und wie Sie Grunt oder Gulp verwenden können, um diesen Workflow zu erhalten.
Die Auswahl einer dieser Optionen hängt mehr von der gewünschten Aufgabe ab.
Grunt ist einfach zu bedienen. Sie müssen das Rohrleitungssystem nicht verstehen, und das Erledigen einfacher Aufgaben wird einfacher. Es ist ein wirklich ausgereiftes Werkzeug, das von vielen bekannten Editoren und Entwicklern verwendet wird, und es gibt viele Plugins.
Das heißt, die Art und Weise, wie Gulp entworfen wurde, kann Ihnen viel Flexibilität geben. Es existiert schon länger, und selbst wenn Sie nicht so viele Plugins für Grunt finden, sind alle klassischen für Gulp verfügbar.
Wenn Sie einen wirklich standardmäßigen Workflow mit gängigen Schritten wie JSHint, Uglivizing, CSS-Validierung usw. verwenden, ist Grunt eine gute Wahl. Wenn es um kompliziertere Aufgaben geht, wird Gulp ein guter Flügelmann sein.
Microsoft bietet viele kostenlose Lernmöglichkeiten zu vielen Open Source-JavaScript-Themen. Wir haben uns vorgenommen, mit Microsoft Edge viel mehr zu schaffen. Hier sind einige zu überprüfen:
Einige kostenlose Tools für den Einstieg: Visual Studio Code, Azure Trial und Cross-Browser-Testtools - alles verfügbar für Mac, Linux oder Windows.
Dieser Artikel ist Teil der Web-Dev-Tech-Serie von Microsoft. Wir freuen uns zu teilen Microsoft Edge und das Neue EdgeHTML-Rendering-Engine mit dir. Erhalten Sie kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac, iOS, Android oder Windows-Gerät. http://dev.modern.ie/.
