Share
Wenn Sie an einem großen Projekt arbeiten, haben Sie zweifellos ein Erstellungsskript oder eine Reihe von Aufgabenskripten, um einige der sich wiederholenden Teile des Prozesses zu unterstützen. Je nach der Sprache, in der das Projekt geschrieben ist, können Sie Ant oder Rake verwenden.
Aber was verwenden Sie, wenn das Projekt hauptsächlich aus JavaScript besteht? Das ist das Problem, das Ben Alman gelöst hat, als er Grunt kreierte.
Was genau ist Grunt? Nun, sagt die README zu Github
Grunt ist ein aufgabenbasiertes Befehlszeilentool für JavaScript-Projekte.
Hier ist die Idee: Wenn Sie an einem JavaScript-Projekt arbeiten, gibt es eine Reihe von Dingen, die Sie regelmäßig tun möchten. Wie, fragst du? Zum Beispiel das Verketten bestimmter Dateien, das Ausführen von JSHint in Ihrem Code, das Ausführen von Tests oder das Minimieren Ihrer Skripts. Wenn Sie Ihr JavaScript online in JSHint einfügen, wissen Sie wahrscheinlich, dass es einen besseren Weg gibt, dies zu tun. auch wenn Sie verwenden Katze Um verkettete Dateien oder einen Befehlszeilen-Minifier zu erstellen, wäre es schön, einen einzigen, einheitlichen Befehlssatz für all diese zusätzlichen Aufgaben zu haben, der für jedes einzelne JavaScript-Projekt richtig war?
Genau das will Grunt sein. Es hat eine Reihe von integrierten Aufgaben, die Sie weit bringen werden, mit der Möglichkeit, eigene Plugins und Skripts zu erstellen, die die Basisfunktionen erweitern.
Für mehr Grunt Intro-Güte, siehe Ben's Post in seinem persönlichen Blog und dem Bocoup-Blog.
Grunt basiert auf Node.js und ist als Paket über den Node Package Manager (npm) verfügbar. Sie sollten es global installieren, verwenden Sie also diesen Befehl:
npm install -g grunt
Sie werden feststellen, dass einige Abhängigkeiten vorhanden sind. Es gibt andere npm-Pakete, die Grunt verwendet. Sobald das erledigt ist, können Sie loslegen!
Wie Sie wissen, ist Grunt ein Befehlszeilentool. Ich gehe daher davon aus, dass Sie für den Rest dieses Tutorials ein Terminalfenster geöffnet haben.
Beginnen wir mit dem Erstellen eines Beispielprojektverzeichnisses. Wir werden hier eigentlich kein Projekt erstellen, aber wir werden sehen, wie Grunt in diesem Verzeichnis funktioniert. Sobald Sie sich in diesem Verzeichnis befinden, führen Sie die grunzen Befehl (gemäß der Dokumentation müssen Sie möglicherweise unter Windows ausführen.) grunt.cmd). Sie werden wahrscheinlich so etwas sehen:
Konfigdatei 'grunt.js' konnte nicht gefunden werden. Brauchen Sie Hilfe?
Bevor Sie Grunt voll ausschöpfen können, benötigen Sie eine grunt.js Datei im Projektverzeichnis. Zum Glück kann Grunt automatisch eine generieren grunt.js Datei - und ein anderes Projekt-Skelett-Material - mit der drin Aufgabe, die auch ohne laufen kann grunt.js Datei an Ort und Stelle. Aber grunzen init Immer noch nicht genug, um Ihr Projekt zu starten, wie Sie sehen, wenn Sie es ausführen. Sie müssen einen Projekttyp auswählen, der generiert werden soll. Laufen grunzen init gibt Ihnen eine Liste von Projekttypen zur Auswahl:
Accentsconagua
Jquery: Ein jQuery-PluginKnoten: Ein Knotenmodulcommonjs: Ein CommonJS-ModulGruntplugin: Ein Grunt-PluginGruntfile: Eine Gruntdatei (grunt.js)Wenn Ihr Projekt keinem der ersten vier Projekttypen entspricht, können Sie den letzten verwenden: Gruntfile: es schafft nur eine grundlegende grunt.js das können Sie ausfüllen. Versuchen wir es also mit der jQuery-Plugin-Vorlage. Lauf grunzen init: jquery in Ihrem Terminal.
Sie werden viele anfängliche Ausgaben feststellen. Wenn Sie sich die Zeit nehmen, um die Vorlagennotizen zu lesen, werden Sie feststellen, dass wir einige Werte wie Projektnamen und Projekttitel eingeben müssen. Nach dieser Notiz sehen Sie in etwa Folgendes:
Bitte beantworten Sie folgendes: [?] Projektname (jquery.demo)
Wenn Sie ein Projekt initialisieren, stellt Ihnen Grunt eine Reihe von Fragen und kann einige Optionen angeben. Dieser Wert in den Klammern? Dies ist der Standardvorschlag, basierend auf dem Projekttyp und dem Namen des Projektverzeichnisses. Wenn Sie es ändern möchten, schreiben Sie Ihren eigenen Projektnamen am Ende der Zeile und drücken Sie die Eingabetaste. Andernfalls drücken Sie einfach die Eingabetaste, um den Standardnamen zu verwenden.
Machen Sie weiter und füllen Sie die restlichen Felder aus. Für ein jQuery-Plugin-Projekt müssen Sie Folgendes angeben:
Viele davon haben Standardwerte; Wenn Sie den Standardwert verwenden möchten, drücken Sie einfach die Eingabetaste für diese Zeile. Wenn Sie das Feld leer lassen möchten, geben Sie einfach "none" ein. Sobald Sie alle Optionen durchgearbeitet haben, werden Sie feststellen, dass Grunt einige grundlegende Projektdateien erstellt. Wie was? So was:
LIZENZ-GPL LIZENZ-MIT README.md grunt.js libs | - jquery | | - jquery.js | - qunit | - qunit.css | - qunit.js package.json src | - jquery.demo.js test | - jquery.demo.html | - jquery.demo_test. js
Wie Sie sehen, ist dies ein guter Anfang: Wir haben nicht nur unsere Plugin-Datei (src / jquery.demo.js), wir haben auch Qunit-Tests (test / jquery.demo_test.js). Und das sind auch keine leeren Dateien. Sie haben einige anfängliche Inhalte, mit einem so super Basis-jQuery-Plugin und Unit-Tests. Schauen Sie sich den Inhalt dieser Dateien an und Sie werden sehen, was ich meine.
Grunt erledigt das Projekt für Sie mehr als nur.
Natürlich richtet Grunt das Projekt nicht nur für Sie ein. Insbesondere hat unser Projekt jetzt grunt.js: eine projektspezifische Konfigurationsdatei; Aufgrund der eingestellten Optionen können wir jetzt auch die anderen integrierten Aufgaben von Grunt verwenden. Bald knacken wir es auf und nehmen einige Anpassungen vor, aber lassen Sie uns jetzt einige Aufgaben ausführen.
Wenn du läufst grunzen jetzt ohne Optionen führen wir die Standardaufgabe aus, sofern eine festgelegt wurde. Im Fall eines jQuery-Plugin-Projekts entspricht dies der Ausführung dieser vier Befehle:
grunzende Fusseln: überprüft Ihr JavaScript mit JSHintgrunze qunit: führt Ihre Qunit-Tests durchgrunzen concat: verkettet Ihre Projektdateien und fügt die neue Datei in ein dist MappeGrunzen min: verkleinert die Datei concat herausgeben.Ich sollte hier etwas zu den Qunit-Tests beachten: Qunit-Tests sollen standardmäßig im Browser ausgeführt werden; einfach offen tests / jquery.demo.html (oder Ihr Äquivalent) im Browser. Jedoch die grunze qunit test möchte sie auf dem Terminal ausführen, was bedeutet, dass PhantomJS installiert sein muss. Es ist nicht schwer: Gehen Sie einfach zu phantomjs.org und laden Sie die neueste Version herunter. Wenn Grunt dies in Ihrem Pfad findet, kann es die Qunit-Tests vom Terminal aus durchführen.
Also rennen grunzen sollte Ihnen eine Ausgabe ähnlich wie diese geben:
Wie Sie sehen, ist jede unserer vier Aufgaben gelaufen. Wenn einer von ihnen fehlschlägt, werden die restlichen Aufgaben abgebrochen (es sei denn, Sie rufen Grunt mit an --Macht Flagge).
Wir haben bereits viele großartige Funktionen aus Grunt herausgeholt, die es so verwenden, wie es kommt. Aber lasst uns das aufbrechen grunt.js Datei und einige Einstellungen vornehmen.
Innerhalb grunt.js, Sie werden sehen, dass die gesamte Konfiguration durch Übergabe eines Objektliteral an erfolgt grunt.initConfig (). Schauen wir uns einige Eigenschaften unseres config-Objekts an.
pkgDiese Eigenschaft zeigt auf das package.json Datei, die Grunt in unserem Projektverzeichnis erstellt hat. Ein ... haben package.json Die Datei ist Teil der CommonJS Packages-Spezifikation. Es ist ein einzelner Ort, an dem die meisten Metadaten zum Projekt (Name, Version, Homepage, Repository-Link ... viele der Werte, die Sie beim Initialisieren des Projekts festlegen) gespeichert werden können. Dies jedoch pkg Die Eigenschaft zeigt mehr als nur auf die Paketdatei: Beachten Sie die Syntax: '. Dies ist eine der integrierten Anweisungen von Grunt: Sie lädt tatsächlich die JSON-Datei, sodass Grunt (oder Sie) auf alle Eigenschaften in der package.json-Datei über die Datei zugreifen können pkg Eigentum.
MetaDas Meta Eigenschaft ist ein Objekt mit nur einer einzigen Eigenschaft: einem Banner. Dieses Banner ist der Kommentar, der oben in verketteten oder minimierten Projektdateien steht. Wie Sie sehen können, handelt es sich um eine Zeichenfolge mit einigen Vorlagen-Tags (<%= %>); In den meisten Fällen umgeben die Tags einen Aufruf einer Eigenschaft auf der pkg Eigentum, wie z pkg.title. Sie können jedoch auch Funktionen innerhalb dieser Tags ausführen: die Verwendung von grunt.template.today () und _.zupfen() zeigt uns das.
concat / Mindest / qunit / Fussel / sehen Ich habe die nächsten fünf Eigenschaften zusammengestellt, weil sie sich sehr ähnlich sind. Sie alle setzen Optionen für bestimmte Aufgaben, die Aufgaben, nach denen sie benannt sind. Bei der Konfiguration dieser Aufgaben ist zu beachten, dass Grunt zwischen zwei Aufgabentypen unterschieden konnte: regulären Aufgaben und Multitasks. Grundsätzlich besteht der Unterschied darin, dass reguläre Tasks nur einen einzigen Satz von Konfigurationsoptionen haben, während Multitasks mehrere Befehlssätze haben können Ziele). Von den fünf Tasks, die ich in der Kopfzeile dieses Abschnitts aufgeführt habe, ist die einzige, die kein Multitask ist sehen.
Beachten Sie, dass in unserem config-Objekt das qunit und Fussel Eigenschaften sind beide Objekte mit der Dateien Eigentum. Dateien ist ein einziges Ziel für diese Aufgabe. In beiden Fällen handelt es sich um ein Array von Dateien, die zur Ausführung dieser Aufgabe verwendet werden. Nehmen wir an, ich möchte nur die Dateien darin fusseln können src Unterverzeichnis. Ich könnte ein anderes Ziel hinzufügen, damit das Fussel Eigenschaft würde so aussehen:
Fusseln: files: ['grunt.js', 'src / ** / *. js', 'test / ** / *. js'], src: ['src / ** / *. js'],
Jetzt nur die Dateien in fusseln src, ich renne grunt fussel: src: Ich übergebe den Zielnamen nach einem Doppelpunkt. Wenn ich nur renne grunzende Fusseln, Beide Ziele werden ausgeführt.
Im Falle der concat und Mindest Aufgaben sind die Ziele komplizierter: Sie sind Objekte mit Quelle (src) und Bestimmungsort (dest) Eigenschaften. Natürlich sagt dies Grunt, wo die Dateien abgerufen und wo sie abgelegt werden sollen, wenn die Verarbeitung abgeschlossen ist. Wenn Sie Ihrem Projekt weitere Dateien hinzufügen, sollten Sie diese an der richtigen Stelle hinzufügen, um sicherzustellen, dass sie ordnungsgemäß verkettet und minimiert sind. Wenn ich also ein src / utils.js Datei, von der mein jQuery-Plugin abhängig war, würde ich ändern concat.dist.src zu diesem:
