Die Generatoren von Yeoman verleihen ihrer Plattform Flexibilität. Sie können dasselbe Tool für alle Arten von Projekten, an denen Sie arbeiten, JavaScript oder andere, wiederverwenden, und das ist, bevor ich die riesige Bibliothek von über 400 von der Community bereitgestellten Generatoren erwähne. Manchmal haben Sie jedoch möglicherweise ein bestimmtes Setup, das Sie gerne in Ihren eigenen Projekten verwenden möchten. In solchen Situationen ist es sinnvoll, die gesamte Speicherplatte in Ihren eigenen Generator zu abstrahieren.

In diesem Artikel werden wir einen Yeoman-Generator erstellen, der es uns ermöglicht, eine Seite für eine einzelne Seite zu erstellen. Dies ist ein ziemlich einfaches Beispiel, aber es wird uns ermöglichen, viele der interessanteren Funktionen zu behandeln, die Yeoman bereitstellt.

Erste Schritte

Ich gehe davon aus, dass Sie Node.js eingerichtet haben. Wenn nicht, können Sie die Installation von hier aus abrufen. Außerdem müssen wir Yeoman sowie den Generator für die Generierung von Generatoren installieren. Dies können Sie mit dem folgenden Befehl erreichen npm:

npm install -g yo Generator-Generator 

Schließlich müssen wir das eigentliche Projekt erstellen. Navigieren Sie zu dem Ordner Ihrer Wahl und führen Sie Folgendes aus:

Ihr Generator 

Dies startet den Generator und stellt einige Fragen wie den Projektnamen und Ihren GitHub-Account. Für diesen Artikel benenne ich meinen Generator eine Seite.

Die Dateistruktur

Seien Sie nicht beunruhigt über die große Anzahl von Dateien, die durch den Befehl erzeugt werden, es wird alles in einem Moment sinnvoll sein.

Die ersten paar Dateien sind Dotfiles für verschiedene Dinge wie Git und Travis CI, wir haben eine package.json Datei für den Generator selbst, a Readme Datei und einen Ordner für Tests. Außerdem erhält jeder Befehl in unserem Generator einen Ordner mit einem index.js Datei und einen Ordner für Vorlagen.

Das index.js Die Datei muss das eigentliche Generatorobjekt exportieren, das von Yeoman ausgeführt wird. Ich werde alles im eigentlichen Generator löschen, damit wir von vorne anfangen können. So sollte die Datei danach aussehen:

'streng verwenden'; var util = erfordern ('util'); var path = required ('pfad'); var yeoman = erfordern ('yeoman-generator'); var Kreide = erfordern ('Kreide'); var OnepageGenerator = yeoman.generators.Base.extend (); module.exports = OnepageGenerator; 

Ein Yeoman Generator kann aus zwei verschiedenen vorgefertigten Optionen bestehen: der Base Generator, von dem Sie sehen können, dass er erbt, oder die NamedBase generator, was eigentlich dasselbe ist, außer dass ein einzelner Parameter hinzugefügt wird, den der Benutzer beim Aufruf des Generators einstellen kann. Es ist nicht so wichtig, welchen Sie wählen, Sie können Parameter manuell hinzufügen, wenn Sie mehr benötigen.

Dieser Code erstellt lediglich dieses Generatorobjekt und exportiert es. Yeoman ruft das exportierte Objekt tatsächlich ab und führt es aus. Die Art und Weise, wie sie ausgeführt wird, besteht darin, zuerst die Konstruktormethode aufzurufen, um das Objekt einzurichten. Anschließend durchläuft es alle Methoden, die Sie für dieses Objekt erstellen (in der Reihenfolge, in der Sie sie erstellt haben) und führen sie nacheinander aus. Das heißt, es spielt keine Rolle, wie Sie die Funktionen bezeichnen, und Sie haben die Flexibilität, ihnen Dinge zu nennen, die für Sie sinnvoll sind.

Das andere, was Sie wissen sollten, ist, dass Yeoman über eigene Funktionen für den Umgang mit dem Dateisystem verfügt, die Ihnen bei Pfaden wirklich helfen. Alle Funktionen, die Sie normalerweise verwenden würden mkdir, lesen, schreiben, Kopieren, usw wurden bereitgestellt, aber Yeoman verwendet das Vorlagenverzeichnis im Ordner dieses Befehls als Pfad zum Lesen von Daten und den Ordner, in dem der Benutzer den Generator ausführt, als Stammpfad für die Ausgabe von Dateien. Dies bedeutet, dass Sie sich beim Arbeiten mit Dateien nicht einmal über die vollständigen Pfade Gedanken machen müssen. Sie können lediglich eine Kopie ausführen, und yeoman wird die zwei verschiedenen Speicherorte für Sie übernehmen.

Input erhalten

Mit Yeoman können Sie Ihrem Generator Fragen hinzufügen, sodass Sie Eingaben vom Benutzer erhalten und das Verhalten entsprechend anpassen können. Wir werden zwei Fragen in unserem Generator haben. Die erste ist der Name des Projekts und die zweite ist, ob als Beispiel ein Dummy-Abschnitt eingefügt werden soll oder nicht.

Um dies zu erreichen, fügen wir eine Funktion hinzu, die den Benutzer zur Eingabe dieser beiden Informationen auffordert und die Ergebnisse dann in unserem Objekt selbst speichert:

var OnepageGenerator = yeoman.generators.Base.extend (promptUser: function () var done = this.async (); // lässt Yeoman den Benutzer console.log (this.yeoman) begrüßen; var frompts = [name: 'appName', Nachricht: 'Wie lautet der Name Ihrer App?', Typ: 'Confirm', Name: 'AddDemoSection', Nachricht: 'Möchten Sie einen Demo-Abschnitt generieren?', Standard: true ]; this.prompt (Eingabeaufforderungen, Funktion (Requisiten) this.appName = props.appName; this.addDemoSection = props.addDemoSection; done (); .bind (this));; 

Die erste Zeile innerhalb der Funktion setzt a erledigt Variable aus dem Objekt asynchron Methode. Yeoman versucht, Ihre Methoden in der Reihenfolge auszuführen, in der sie definiert sind. Wenn Sie jedoch einen asynchronen Code ausführen, wird die Funktion beendet, bevor die eigentliche Arbeit abgeschlossen ist, und Yeoman startet die nächste Funktion vorzeitig. Um dies zu umgehen, können Sie die anrufen asynchron Diese Methode gibt einen Rückruf zurück. Anschließend wartet Yeoman mit der nächsten Funktion, bis der Rückruf ausgeführt wird, was Sie am Ende nach der Aufforderung des Benutzers sehen können.

Die nächste Zeile, in der wir uns gerade anmelden Yeoman, Das ist das Yeoman-Logo, das Sie gesehen haben, als wir kurz zuvor den Yeoman-Generator ausgeführt haben. Als Nächstes haben wir eine Liste von Eingabeaufforderungen definiert. Jede Eingabeaufforderung hat einen Typ, einen Namen und eine Nachricht. Wenn kein Typ angegeben wurde, wird standardmäßig 'Eingabe' verwendet, was für die Standardtexteingabe gilt. Es gibt viele coole Eingabetypen wie Listen, Kontrollkästchen und Passwörter. Sie können die vollständige Liste hier anzeigen. In unserer Anwendung verwenden wir eine Texteingabe- und eine Bestätigungsart (Ja / Nein).

Wenn die Reihe der Fragen fertig ist, können wir sie an das Forum weiterleiten Prompt Methode zusammen mit einer Rückruffunktion. Der erste Parameter der Rückruffunktion ist die Liste der vom Benutzer zurückgegebenen Antworten. Wir hängen diese Eigenschaften dann an unser Hauptobjekt an und nennen das erledigt Methode, um zur nächsten Funktion zu gelangen.

Gerüste Unsere Anwendung

Unsere Anwendung hat das äußere Skelett, das die Kopfzeile, das Menü, die Fußzeile und ein paar CSS-Dateien enthält. Anschließend haben wir den inneren Inhalt, der in einem eigenen Verzeichnis mit einer benutzerdefinierten CSS-Datei pro Abschnitt gespeichert wird. Auf diese Weise können Sie globale Eigenschaften in der Hauptdatei festlegen und jede Zeile einzeln anpassen.

Beginnen wir mit der Header-Datei. Erstellen Sie einfach eine neue Datei im Vorlagenverzeichnis _header.html mit den folgenden:

Die Dateinamen müssen nicht mit einem Unterstrich beginnen. Es empfiehlt sich jedoch, den Namen vom endgültigen Ausgabenamen zu unterscheiden, damit Sie feststellen können, mit welchem ​​Sie sich befassen. Außerdem können Sie sehen, dass ich neben der Einbindung unserer CSS-Hauptdatei auch die Semantic UI Library als Raster für Zeilen und für das Menü mit einbezieht (ganz zu schweigen von der guten Gestaltung)..

Eine andere Sache, die Sie vielleicht bemerkt haben, ist, dass ich für den Titel einen EJS-artigen Platzhalter verwendet habe, der zur Laufzeit ausgefüllt wird. Yeoman verwendet Underscore-Templates (gut 10 Strich) und so können Sie Ihre Dateien so erstellen und die Daten werden zur Laufzeit generiert.

Als Nächstes erstellen wir die Fußzeile (setzen Sie diese in eine Datei mit dem Namen) _footer.html im Vorlagenordner):

Es schließt nur das HTML-Dokument für uns, da in unserer Anwendung kein JavaScript vorhanden ist. Die letzte HTML-Datei, die für das äußere Gerüst erforderlich ist, ist das Menü. Wir werden zur Laufzeit die eigentlichen Links generieren, aber wir können den äußeren Container in eine als Vorlagendatei bezeichnete Datei schreiben _menu.html:

Es ist ein einfaches Div mit einigen Klassen, die von Semantic UI bereitgestellt werden. Wir werden die tatsächlichen Links später basierend auf den generierten Abschnitten ziehen. Als nächstes machen wir das _main.css Datei:

body margin: 0; Schriftfamilie: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", Serifenlose;  

Nur ein wenig Code, der bei der Menüpositionierung und beim Ändern der Schriftart behilflich ist. Hier können Sie beliebige Standardstile für das gesamte Dokument einfügen. Jetzt müssen wir Vorlagen für die einzelnen Abschnitte und die zugehörigen CSS-Dateien erstellen. Dies sind ziemlich grundlegende Dateien, da wir sie für den Benutzer ziemlich leer lassen, so dass sie vom Benutzer angepasst werden können _section.html Folgendes hinzufügen:

 
 
<%= content %>
 
 

Nur ein äußeres Div mit einer eindeutigen ID, die wir basierend auf dem Namen des Abschnitts und einer Klasse für das Semantic-Grid-System generieren werden. Dann fügte ich innen einen hinzu H1 Tag, der wieder nur den Namen des Abschnitts enthält. Als Nächstes erstellen wir die CSS-Datei. Erstellen Sie also eine Datei mit dem Namen section.css mit den folgenden:

#<%= id %>Hintergrund: #FFFFFF; Farbe: # 000;  

Dies ist eher ein Platzhalter mit der gleichen ID wie der äußere Container. Es ist jedoch üblich, den Hintergrund jeder Zeile zu ändern, um den Inhalt zu trennen. Daher habe ich diese Eigenschaft aus Gründen der Übersichtlichkeit hinzugefügt. Nun, nur der Vollständigkeit halber, erstellen wir eine Datei namens _gruntfile.js aber wir werden es später bevölkern und das ausfüllen _package.json Datei, die bereitgestellt wurde:

"name": "appname", "version": "0.0.0", "devDependencies": "grunt": "~ 0.4.2", "grunt-contrib-connect": "~ 0.6.0", "grunt-contrib-concat": "~ 0.3.0", "grunt-contrib-cssmin": "~ 0.7.0" 

Es ist ein bisschen ein Spoiler, was wir später tun werden, aber es sind die Abhängigkeiten, die wir für unsere Grunt-Aufgaben benötigen.

Wenn alle diese Dateien bereit sind, fügen wir die Methoden hinzu, um ein neues Projekt zu erstellen. Also zurück in unsere index.js Datei direkt nach dem promptUser Methode, fügen wir eine Funktion hinzu, um alle Ordner zu erstellen, die wir benötigen:

scaffoldFolders: function () this.mkdir ("app"); this.mkdir ("app / css"); this.mkdir ("app / abschnitte"); this.mkdir ("build"); , 

Ich fügte ein hinzu App Ordner und innen zwei weitere Verzeichnisse: css und Abschnitte, Hier würde der Endanwender eine Anwendung erstellen. Ich habe auch eine erstellt bauen Ordner, in dem die verschiedenen Abschnitte und CSS-Dateien zusammengestellt und in eine einzige Datei integriert werden.

Als Nächstes fügen Sie eine weitere Methode hinzu, um einige unserer Vorlagen zu kopieren:

copyMainFiles: function () this.copy ("_ footer.html", "app / footer.html"); this.copy ("_ gruntfile.js", "Gruntfile.js"); this.copy ("_ package.json", "package.json"); this.copy ("_ main.css", "app / css / main.css"); var context = site_name: this.appName; this.template ("_ header.html", "app / header.html", Kontext); , 

Hier verwenden wir zwei neue Methoden, Kopieren und Vorlage, welche in Funktion ziemlich ähnlich sind. Kopieren nimmt die Datei aus dem Vorlagenverzeichnis und verschiebt sie unter Verwendung der angegebenen Pfade in den Ausgabeordner. Vorlage tut dasselbe, es sei denn, es wird vor dem Schreiben in den Ausgabeordner mit der Kontextfunktion von Underscore zusammen mit dem Kontext ausgeführt, um die Platzhalter auszufüllen.

Ich habe das Menü noch nicht kopiert, da wir die Links generieren müssen, aber wir können die Links erst erstellen, wenn wir den Demo-Abschnitt hinzugefügt haben. Die nächste Methode, die wir erstellen, fügt den Demo-Abschnitt hinzu:

generateDemoSection: function () if (this.addDemoSection) var context = content: "Demo-Bereich", id: this ._. classify ("Demo-Abschnitt") var fileBase = Date.now () + "_" + this ._. unterstrichen ("Demo Section"); var htmlFile = "app / section /" + fileBase + ".html"; var cssFile = "app / css /" + fileBase + ".css"; this.template ("_ section.html", htmlFile, Kontext); this.template ("_ section.css", cssFile, context); , 

Eine andere Funktion, mit der Sie möglicherweise nicht vertraut sind, ist die klassifizieren Funktion, die Ihnen von Underscore Strings zur Verfügung gestellt wird. Was er tut, ist, dass er eine Zeichenfolge benötigt und eine „Klassenversion“ davon erstellt. Er entfernt beispielsweise Leerzeichen und erstellt eine Version mit Kamelgehäuse, die sich für Dinge wie HTML-Klassen und IDs eignet. unterstrichen tut dasselbe, außer dass sie statt Kamelhüllen sie schlängelt. Abgesehen davon ist es alles, was wir in der vorherigen Funktion gemacht haben, das einzige andere, das erwähnenswert ist, ist, dass wir einen Zeitstempel vorbereiten, sowohl um die Dateien eindeutig zu halten, als auch um zu bestellen. Wenn wir die Dateien laden, werden sie alphabetisch geordnet, so dass die Zeit als Präfix sie in Ordnung hält.

Die letzte zu kopierende Datei ist die menu.html Datei, aber dafür müssen wir die Links generieren. Das Problem ist, dass wir zu diesem Zeitpunkt nicht wirklich wissen, welche Dateien zuvor erstellt wurden oder ob der Benutzer Abschnitte manuell hinzugefügt hat. Um das Menü aufzubauen, müssen wir aus dem Ausgabepfad lesen und nachdem wir die dort vorhandenen Abschnitte gelesen haben, müssen wir die Menüverknüpfungen erstellen. Es gibt eine Handvoll neuer Funktionen, die wir noch nicht verwendet haben. Wir werden sie Zeile für Zeile durchgehen:

generateMenu: function () var menu = this.read ("_ menu.html"); var t = '<%= name %>'; var files = this.expand ("app / section / *. html"); für (var i = 0; i < files.length; i++)  var name = this._.chain(files[i]).strRight("_").strLeftBack(".html").humanize().value(); var context =  name: name, id: this._.classify(name) ; var link = this.engine(t, context); menu = this.append(menu, "div.menu", link);  this.write("app/menu.html", menu); , 

runNpm: function () var done = this.async (); this.npmInstall ("", function () console.log ("\ nAlles Setup !!! \ n"); done (););  

module.exports = function (grunt) grunt.initConfig (// task config); grunt.loadNpmTasks ('grunt-contrib-connect'); grunt.loadNpmTasks ('grunt-contrib-cssmin'); grunt.loadNpmTasks ('grunt-contrib-concat'); grunt.registerTask ('dienen', ['verbinden']); grunt.registerTask ('build', ['concat', 'cssmin']); grunt.registerTask ('default', ['build']); ; 

concat: dist: src: ["app / header.html", "app / menu.html", "app / section / *. html", "app / footer.html"], dest: "build / index .html ", cssmin: css: files: " build / css / main.css ": [" app / css / *. css "] 

connect: server: options: keepalive: true, open: true, Middleware: function () // benutzerdefinierte Handler hier, 

 var Middleware = []; middleware.push (Funktion (req, res, next) if (req.url! == "/") return next (); res.setHeader ("Inhaltstyp", "text / html"); var html = grunt.file.read ("app / header.html"); html + = grunt.file.read ("app / menu.html"); var files = grunt.file.expand ("app / section / *. html.) "); für (var i = 0; i < files.length; i++)  html += grunt.file.read(files[i]);  html += grunt.file.read("app/footer.html"); res.end(html); ); 

 middleware.push (Funktion (req, res, next) if (req.url! == "/css/main.css") return next (); res.setHeader ("Inhaltstyp", "text / css") ); var css = ""; var files = grunt.file.expand ("app / css / *. css"); für (var i = 0; i < files.length; i++)  css += grunt.file.read(files[i]);  res.end(css); ); 

 middleware.push (Funktion (req, res) res.statusCode = 404; res.end ("Not Found");); Middleware zurückgeben; 

yo generator: subgenerator section 

'streng verwenden'; var util = erfordern ('util'); var yeoman = erfordern ('yeoman-generator'); var SectionGenerator = yeoman.generators.NamedBase.extend (); module.exports = SectionGenerator; 

generateSection: function () var context = content: this.name, id: this ._. classify (this.name) var fileBase = Date.now () + "_" + dieser ._. unterstrichen (this. Name); var htmlFile = "app / section /" + fileBase + ".html"; var cssFile = "app / css /" + fileBase + ".css"; this.template ("_ section.html", htmlFile, Kontext); this.template ("_ section.css", cssFile, context); , generateMenu: function () var menu = this.read ("_ menu.html"); var t = '<%= name %>'; var files = this.expand ("app / section / *. html"); für (var i = 0; i < files.length; i++)  var name = this._.chain(files[i]).strRight("_").strLeftBack(".html").humanize().value(); var context =  name: name, id: this._.classify(name) ; var link = this.engine(t, context); menu = this.append(menu, "div.menu", link);  this.write("app/menu.html", menu);  

generateDemoSection: function () if (this.addDemoSection) var done = this.async (); this.invoke ("onepage: section", args: ["Demo Section"]), function () done (););  else this.write ("app / menu.html", ""); ,