Share
Laut yeoman.io ist "Yeoman ein robuster und meinungsstarker Satz von Tools, Bibliotheken und einem Workflow, mit dem Entwickler schnell schöne, ansprechende Web-Apps erstellen können." Lasst uns reinschauen und sehen, was das genau bedeutet!
_ .--------------------------. _ | o | _ | Willkommen bei Yeoman, | | _ | | Meine Damen und Herren! | / \ Y / \ o _________________________ | || : | // o / --- \ _ \ / _
Heutzutage wird viel Arbeit in die Erstellung von Web-Apps gesteckt. Es gibt unzählige Bibliotheken, Muster, Stile, Raster, Boilerplates, Bootstraps usw. - die Liste geht weiter! Yeoman ist eine Antwort auf einige dieser Probleme. Anstatt eine Menge Zeit zu verschwenden, um eine Anwendung zum Laufen zu bringen, erledigt Yeoman die Hauptlast der Arbeit für Sie - es sind nur wenige Befehle erforderlich.
Der schnellste Weg, um mit Yeoman zu beginnen, ist das folgende Skript auszuführen.
curl -L get.yeoman.io | SchHinweis: Yeoman wird von OSX, Linux und Windows unterstützt. Dieser Vorgang dauert etwa 10 Minuten. In einem zukünftigen Update wird dieser Installationsprozess jedoch geändert.
Das war also einfach. Was ist gerade passiert? Viele Dinge! Das install.sh Datei aus ,get.yeoman.io, hat einen Header, der genau beschreibt, was aufgetreten ist.
# * Erkennen Sie Mac oder Linux, wählen Sie den Paketmanager aus, der verwendet werden soll. # * Installieren Sie Homebrew, wenn es nicht vorhanden ist Wenn nicht (für Compass) # * Installiere das neueste NodeJS-Paket # * Install Compass # * Lade Yeoman zip in einen temporären Ordner # * Installiere es als globales Knotenmodul
Und da hast du es!
Yeoman ist als globales Knotenmodul installiert. Öffnen Sie Ihr TOC (Terminal of Choice) und führen Sie es aus Yeoman.
Beim ersten Start werden Sie gefragt, ob Sie ihnen erlauben möchten, Statistiken über Ihre Yeoman-Nutzung zu behalten. Sie verfügen über ein Google Analytics-Konto, um alle Arten von interessanten Nutzungsstatistiken zu verfolgen.
Einfach laufen Yeoman Von nun an wird eine Liste der zur Ausführung verfügbaren Befehle ausgedruckt.
Accentsconagua
yeoman initHier passiert die Gerüstmagie. Führen Sie den folgenden Befehl für eine grundlegende gerüstete App aus.
yeoman init
Dieser Befehl stellt fünf Fragen:
Aus der Box rennen drin wird HTML5 Boilerplate sowie jQuery und Modernizr enthalten. Hier ist eine erweiterte Liste.
Es werden auch CoffeeScript- und Compass-Dateien nach dem Auspacken kompiliert!
Generatoren sind die Magie hinter dem gesamten Gerüst. Das drin Der Befehl selbst basiert auf einem Generator. Es gibt ein separates Repository für sie. Es sind bereits viele verfügbar, einschließlich Rückgrat, Glut, und Winkelig um nur einige zu nennen. Um eine Liste von allen anzuzeigen, führen Sie einfach…
yeoman init --hilfe
Generatoren sind ein großer Teil von Yeoman und sollen modifiziert und ergänzt werden.
Spitze: Hilfe zum Erstellen eines eigenen Generators finden Sie im Generatorbereich der Dokumentation.Wenn Sie eine eigene Backbone.js-Anwendung erstellen möchten, können Sie einfach Folgendes ausführen:
mkdir backboneapp & & cd backboneapp yeoman init backbone
Dadurch wird ein Projekt mit mehreren Boilerplate-Modellen, Ansichten und Sammlungen erstellt, die mit Lodash, Mocha, jQuery und HTML5-Boilerplate vorinstalliert sind.
Sie können dasselbe mit tun eckig und Glut Wie zuvor erwähnt.
Es gibt verschiedene Untergeneratoren auch, die Ihnen erlauben, Dinge zu tun, wie:
yeoman init backbone: view awesomeAnsicht yeoman init backbone: Modell awesomeModel yeoman init backbone: Sammlung awesomeCollection yeoman init backbone: Router awesomeRouter
Dann BAM, Sie haben etwas Neues Codez mit zu arbeiten, anstatt eine Menge Zeit zu verschwenden, um Boilerplate-Code umzuschreiben!
Yeoman bauenUnter den Covers finden Sie Grunt, ein beliebtes Framework, das von Ben Alman (Cowboy) zum Erstellen von JavaScript-Anwendungen erstellt wurde. Es beruht auf einem grunzen Konfigurationsdatei, in der Tasks zur Durchführung verschiedener Vorgänge konfiguriert werden, z.
Yeoman ist auf Grunt aufgebaut, erweitert es jedoch um einige neue Modifikationen und Funktionen. Diese schließen ein:
r.js Die Konfiguration wird innerhalb von angezeigt gruntfile.js Datei in der generierten App. Wenn Sie mit der Entwicklung fertig sind, führen Sie die folgenden Schritte aus, um die App zu erstellen.
Yeoman bauen
Ihre neu erstellte App wird in einer dist / Mappe. Eine coole Funktion ist, wie Yeoman Skriptreferenzen übernimmt, wie zum Beispiel:
Nachdem Sie den Build ausgeführt haben, müssen Sie diese Dateien auf ein einzelnes Verzeichnis beschränken Skript Referenz. Das sind zwölf HTTP-Anfragen bis zu einer!
Die einzelnen Schritte für den Erstellungsprozess finden Sie in gruntfile.js, Die wird erstellt, wenn die App erstellt wird. Es gibt auch mehrere Build-Target-Optionen.
yeoman Server Yeoman bietet auch einen integrierten Hosting-Server, um Ihre App lokal zu testen. LiveReload oder einfache Dateiüberwachung, wenn Sie nicht über LiveReload verfügen, stellt auch sicher, dass beim Ausführen des Servers alle Änderungen an den Dateien in der App den Browser automatisch mit den neuen Änderungen neu laden. Standardmäßig ist der Port, auf dem es ausgeführt wird 3051. Durch Ausführen der folgenden…
# Führen Sie dies für den nicht erstellten yeoman-Server aus. # Oder dies für den integrierten yeoman-Server: dist
Ein neues Browserfenster wird geöffnet, während Ihre App ausgeführt wird. Der Server wird auch Coffee- und Sass-Assets kompilieren und diese in einem Temp Verzeichnis. Sie müssen sich also keine Sorgen um das Kompilieren machen! Es gibt mehrere andere Serverziele. Achten Sie darauf, sie zu überprüfen.
Yeoman-Test Mocha ist ein beliebtes Testsystem für Einheiten und ist in Yeoman integriert. Wenn ein Projekt gerüstet ist, wird ein Testordner mit einem index.html Datei wird mit Mocha und Chai für Assertions erstellt. Einfach ausführen:
Yeoman-Test
Yeoman führt dann Mocha gegen PhantomJS aus. Hierbei handelt es sich um einen Browser ohne Webkits, der in Node.js ausgeführt wird. Dann können Sie gerne neue Tests hinzufügen index.html Datei. Unit-Tests können jede Anwendung erheblich verbessern, und Yeoman macht den Prozess so einfach wie möglich. Es gibt also keine Ausreden mehr! Sie können Jasmin auch verwenden, wenn Sie möchten --Test-Framework Jasmin zum yeoman init Befehl.
du installierstUm neue Client-Bibliotheken in Ihrer Anwendung zu installieren, verwendet Yeoman eine Bibliothek namens Bower, die von einigen Leuten bei Twitter entwickelt wird.
Bower ist ein Paketmanager für das Web. Mit Bower können Sie Assets wie Bilder, CSS und JavaScript problemlos installieren und Abhängigkeiten für Sie verwalten.
Yeoman erlaubt die folgenden Befehle:
# Installieren Sie Pakete, die durch Leerzeichen voneinander getrennt sind. Yeoman installieren Sie jquery. # Deinstallieren Sie yeoman. Deinstallieren Sie jquery. # Aktualisieren Sie yeoman. Aktualisieren Sie jquery. # Installiert Unterstreichungen spezifisch basierend auf einem Namen Yeoman Lookup Mokka # Gehen Sie auf Basis eines Stichworts Yeoman Lookup Unterstrich
Bower ist eine hervorragende Ergänzung zu Yeoman und löst das Workflow-Problem, dass beim Erstellen von Apps ständig Bibliotheken abgerufen werden müssen. Es stellt auch sicher, dass sie auf dem neuesten Stand sind. Hier ist ein Beispiel, wie Sie Bower verwenden können.
bower install jquery bower installieren git: //github.com/maccman/package-jquery.git bower install http://code.jquery.com/jquery-1.7.2.js bower ./repos/jquery installieren
Die mit Bower installierten Apps werden in a gespeichert Komponente.json Datei im Stammverzeichnis der Anwendung.
Lassen Sie uns von Anfang bis Ende eine einfache Backbone-Anwendung erstellen.
# Erstellen Sie eine neue App yeoman init backbone # Erstellen Sie ein neues Modell und eine Sammlung. WAVES HAND UND FÜGT VIEL CODE # https://github.com/jcreamer898/yeomanbbapp yeoman server # Bauen Sie ALLE DINGE auf! yeoman build # Schauen Sie sich den neuen Buildman an ... yeoman Server: dist
Wow, es ist fast zu einfach - und vergessen Sie nicht, dass Sie Bash-Aliase erstellen können, um diesen Code weiter zu verkürzen. Am schwierigsten war das Erstellen der Beispiel-App! Aber das ist das Schöne daran. Yeoman bringt dich weg
Der Boilerplate-Code ermöglicht Ihnen, sich ausschließlich auf das Harte zu konzentrieren!
Wenn Sie möchten, schauen Sie sich die App an, um zu sehen, wie alles lief. Ich würde es ziemlich gut sagen.
Yeoman kann den Entwicklungsprozess für eine neue Anwendung schnell beschleunigen. Anstatt Zeit mit dem Sammeln von Bibliotheken und dem Schreiben von Text in der Zwischenablage zu verschwenden, geben Sie stattdessen ein paar Befehle ein und schon kann es losgehen! Besser noch, es ist Open Source und wurde von ein paar Typen geschrieben, die Sie vielleicht kennen!
Genießen!
