Share
Eines ist sicher: Die Zeiten haben sich geändert. Vor nicht allzu langer Zeit war die Front-End-Entwicklung, wenn auch nicht einfach, überschaubar. Lernen Sie HTML, ein bisschen CSS und schon sind Sie unterwegs. In diesen Tagen gibt es jedoch aus Mangel an besseren Worten weitaus mehr Variablen zum Jonglieren.
Vorprozessoren, Leistungsoptimierung, Testen, Bildoptimierung und Minifizierung sind nur einige der Schlüsselfaktoren, die der moderne Front-End-Entwickler berücksichtigen muss.
CSS ist zwar einfach zu bedienen, lässt sich jedoch nicht gut skalieren. JavaScript ist zwar mächtig, aber manchmal eine hässliche, schwierige Sprache, mit der man arbeiten kann. Dann gibt es den Leistungsaspekt. Wir entwerfen nicht mehr nur für Internet Explorer und Firefox. Nein, heutzutage haben wir eine Vielzahl an Browsern, Geräten, Auflösungen und Verbindungsgeschwindigkeiten, die bei der Entwicklung neuer Anwendungen zu berücksichtigen sind.
Zu sagen, dass unsere Branche eine unglaublich harte Industrie ist, wäre die Untertreibung des Jahrhunderts.
Der Vorteil ist, dass für jede Straßensperre sicherlich Lösungen bereitgestellt wurden.
Der Vorteil ist, dass für jede Straßensperre sicherlich Lösungen von Mitgliedern der Community bereitgestellt wurden. Betrachten Sie das CSS-Skalierungsproblem. Nun, Preprocessoren wie Sass, Less und Stylus wurden eingeführt, um unser Leben drastisch zu vereinfachen. Was ist mit dem unangenehmen CSS3-Browser-Prefixing? Dafür sorgt Compass! Und das JavaScript-Dilemma? Erneut CoffeeScript und jetzt TypeScript zur Rettung! Das einzige Problem ist, dass jede neue Lösung ein eigenes System und einen eigenen Prozess benötigt. Wie zu erwarten, kann dies im Laufe der Zeit Ihren Workflow erheblich erschweren. Jetzt haben wir mehrere Terminal-Registerkarten geöffnet, von denen jede eine Teilmenge der Dateien in unseren Projekten überwacht und auf Änderungen wartet. Und das ist nur die Spitze des Eisbergs. Wir haben bisher noch nicht auf den Workflow, das Kodieren von Best Practices, die Bildoptimierung, das Testen und die Entwicklung eines automatisierten Buildprozesses eingegangen. Selbst wenn ich über all diese Schritte schreibe, verkürzt sich mein Atem! Wäre es nicht fantastisch, wenn jemand all diese Vorprozessoren und bewährten Methoden in einem einfach zu verwendenden Paket zusammenfasst??
Yeoman wurde von einigen freundlichen Leuten bei Google (einschließlich Paul Irish und Addy Osmani) entwickelt und ist die Lösung für Ihre Probleme. Wie das Kernteam sagt, bietet Yeoman einen meinungsorientierten Workflow, um Sie so schnell wie möglich mit neuen Projekten vertraut zu machen. Aber was heißt das wirklich? Nun, es bietet die Möglichkeit, neue Projekte sowie die erforderlichen Frameworks und Testwerkzeuge zu erstellen. Was dies im Wesentlichen bedeutet, ist weniger langwierige Konfiguration und mehr Schöpfung.
Um mit Yeoman zu beginnen, müssen Sie es zunächst über die Befehlszeile installieren. Führen Sie den folgenden Befehl aus:
curl -L get.yeoman.io | bash
Dieses Skript führt eine Vielzahl von Aufgaben aus, einschließlich der Installation der erforderlichen Bibliotheken, die Yeoman für seine Arbeit benötigt. Sie werden wahrscheinlich feststellen, dass es einige Schritte von Ihrer Seite erfordert, aber machen Sie sich keine Sorgen. Es wird Ihnen genau sagen, was zu tun ist!
Führen Sie die Installation nach Abschluss der Installation aus Yeoman um zu sehen, was verfügbar ist. Sie finden eine Vielzahl von Optionen, wie z drin, zur Initialisierung eines neuen Projekts, bauen, für die Schaffung eines speziellen, optimierten dist Ordner für die Bereitstellung und Installieren, Das macht den Umgang mit der Paketverwaltung so einfach wie möglich.
Um mehr über die einzelnen Optionen zu erfahren, fügen Sie sie an
--Hilfezum Befehl:yeoman init --hilfe.
Lassen Sie uns mit Yeoman ein neues Projekt erstellen. Erstellen Sie ein neues Verzeichnis auf Ihrem Desktop, CD dazu vom Terminal aus und führe:
yeoman init
An diesem Punkt werden Sie mit einer Handvoll Fragen aufgefordert.
Diese Fragen geben Ihnen die Möglichkeit, Ihr neues Projekt sofort zu konfigurieren. Wählen Sie zunächst für jede Frage „Nein“.
Wenn Sie es vorziehen, diese Fragen in Zukunft zu umgehen, starten Sie stattdessen
yeoman init Schnellstart. Dadurch wird eine neue Anwendung vorbereitet, in der Modernizr, jQuery und HTML5 Boilerplate eingebacken sind.
Mit diesem einzigen Befehl erstellt Yeoman sofort ein neues Projekt für Sie. Lassen Sie sich jedoch nicht von all diesen Dateien überwältigen. Wenn sie nicht für Sie generiert wurden, erstellen Sie sie eventuell manuell. Stellen Sie sich Yeoman als den hilfreichen Roboter vor, der alle manuellen Arbeiten für Sie erledigt.
„Yo, Mann; Hol mich und jQuery und Modernizr! “
Nachdem wir ein neues Projekt erstellt haben, starten wir einen Vorschauserver und beginnen mit der Überwachung der Anwendung auf Änderungen.
yeoman Server
Google Chrome wird sofort gestartet und zeigt Ihr Projekt an (auch keine Sicherheitsfehler mehr). Das ist praktisch, aber wie Sie schnell feststellen werden, gibt es noch viel mehr zu sehen. Platzieren Sie Ihren Browser und Ihren Editor nebeneinander und versuchen Sie Folgendes:
Ändere das h1 Tag-Text, und sehen Sie sich die Aktualisierung im Browser ohne Aktualisierung an. Yeoman zu Ihren Diensten! Dies wird über die LiveReload-Erweiterung von Google Chrome erreicht. Falls dies nicht installiert ist, wird ein Fallback-Reload-Vorgang verwendet.
Veränderung main.css zu main.sass (oder main.scss, Wenn Sie dies bevorzugen), können Sie das Kompilieren und Aktualisieren im Browser sofort durchführen. Versuchen Sie zum Testen eine Variable zu erstellen und zu verwenden.
// main.sass $ textColor: # 666 Körperfarbe: $ textColor
Nett! Kein Setup erforderlich. Sie können Ihre Stylesheets jetzt nach Bedarf trennen und in importieren main.sass.
// main.sass @import 'grid' @import 'knöpft' @import 'Modul'
Bei jedem Speichern einer Datei kompiliert Yeoman Ihren Sass automatisch in normales CSS und aktualisiert den Browser.
Wenn Sie ein Sass-Fan sind, bevorzugen Sie wahrscheinlich auch das hervorragende Compass-Framework. Keine Bange; Yeoman freut sich, dies zu tun. Kompass-Support ist bereits verfügbar; Importieren Sie einfach die entsprechenden Module und fahren Sie wie gewohnt fort.
// main.sass @import 'compass / css' * + Größe der Box (Rahmen) .box Breite: 200px + Übergang (Breite 1s) &: Schwebeflugbreite: 400px
Wenn Sie noch kein Preprozessor-Konverter sind, müssen Sie zugeben: Dies ist deutlich besser als die Alternative:
* -webkit-box-size: border-box; -moz-box-dimensionierung: border-box; Box-Dimensionierung: Border-Box; .box width: 200px; -webkit-Übergang: Breite 1s; -Moz-Übergang: Breite 1s; -ms-Übergang: Breite 1s; -o-Übergang: Breite 1s; Übergang: Breite 1s; .box: hover width: 400px;
JavaScript ist einfach gut und schön, aber einige glauben, dass CoffeeScript eine deutlich sauberere Syntax bietet, die viele Lücken in der Sprache (zumindest visuell) füllt..
Innerhalb des Drehbücher / Verzeichnis erstellen, optional einen neuen Ordner erstellen, Kaffee/, und fügen Sie Ihre erste CoffeeScript-Datei hinzu: person.coffee.
# scripts / coffee / person.coffee class Person
Speichern Sie die Datei, und Yeoman kompiliert sie wie Magie sofort in Vanilla-JavaScript und platziert die neue Datei direkt im übergeordneten Element Drehbücher / Verzeichnis. Überzeugen Sie sich selbst:
// scripts / person.js var Person; Person = (Funktion () Funktion Person () Rückgabe Person;) ();
Perfekt und vor allem mühelos!
Wenn Sie die Verzeichnisstruktur auf irgendeine Weise ändern müssen, lesen Sie den Abschnitt
gruntfile.jsDatei im Stammverzeichnis Ihrer Anwendung. Hinter den Kulissen konfiguriert Ben Almans Grunt-Tool die Zusammenstellung.
Allein an diesem Punkt hat uns Yeoman sehr flexibel gemacht. Mit dieser Single yeoman init Wenn Sie den Befehl verwenden, können Sie Ihre Websites jetzt mit Sass formatieren, in CoffeeScript kodieren und bei Änderungen sofort die Aktualisierungen im Browser sehen. Aber wir sind noch nicht fertig! Nicht einmal annähernd.
Yeoman nutzt einen leistungsfähigen Paketmanager für das Web, genannt Bower. Was ist ein Paketmanager? Wenn Sie beispielsweise die Underscore-Bibliothek noch manuell von Underscorejs.org herunterladen, machen Sie es falsch. Was passiert, wenn die Bibliothek einige Monate später aktualisiert wird? Werden Sie die Bibliothek erneut manuell herunterladen? Zeit ist Geld; Lassen Sie Yeoman die Arbeit für Sie erledigen.
Ziehen wir Underscore in unser Projekt ein.
yeoman installiere den Unterstrich
Yeoman wird auf diesen Befehl reagieren, indem Sie die neueste Version der Bibliothek herunterladen und in eine neue einfügen Verkäufer Verzeichnis. Nun kann es verwendet werden!
Was aber, wenn wir nicht genau wissen, wie der Vermögenswert lautet, den wir benötigen? In diesen Situationen können wir uns darauf beziehen yeoman suche. Ohne Argumente zu übergeben, gibt Yeoman eine Liste aller Assets zurück, die zur Installation verfügbar sind. Lass uns nach dem Populären suchen normalize.css Projekt, von Nicolas Gallagher.
Denken Sie daran: Bower ist nicht ausschließlich für JavaScript-spezifische Assets.
yeoman Suche normalisieren
Zum Zeitpunkt dieses Schreibens sollten zwei Projekte zurückgegeben werden:
Es sieht aus wie normalize-css ist der, den wir wollen.
yeoman installiert normalize-css
Nun importieren Sie es auf die gleiche Weise, wie Sie es normalerweise tun würden:
Alternativ können Sie die Datei in umbenennen normalize.scss, und importiere es in dein main.sass Datei.
// main.sass @import '… / scripts / vendor / normalize-css / normalize'
Es gibt eine Vielzahl anderer Bower-spezifischer Befehle, die Sie sich merken möchten:
Accentsconagua
yeoman deinstalliert jquery - Deinstallieren Sie ein Paket.yeoman update jquery - Aktualisieren Sie die Bibliothek auf die neueste Version.yeoman liste - Alle aktuell installierten Pakete auflisten.Wenn das Testen noch nicht Bestandteil Ihres Workflows ist, sollte dies auch der Fall sein! Was könnte besser sein als ein Roboter, der Ihre Arbeit nach jedem Speichern automatisch überprüft? Glücklicherweise macht es Yeoman unglaublich einfach, Ihre Anwendungen zu testen. Standardmäßig sind das beliebte Mocha-Framework und PhantomJS (headless Webkit) verfügbar, das jedoch leicht konfiguriert werden kann, wenn Sie ein anderes Tool wie Jasmine bevorzugen. Darüber hinaus bietet es die Chai-Assertionsbibliothek, die Sie schnell lieben werden.
Öffne das tests / index.html Datei. Unten sehen Sie einige Testbeispiele. Löschen Sie diese und erstellen Sie eine neue Testdatei: spec / person.js. Hier ist ein Test, um den Einstieg zu erleichtern.
// test / spec / person.js beschreiben ('Eine Person', Funktion () it ('sollte ein Alter über 0' haben), Funktion () var Person = neuer Personenname: 'Jeffrey', Alter: 27 erwartet (person.age ).auf.o. oben (0););); Wenn Sie lieber Chai's (eine Assertionsbibliothek) verwenden möchten sollte Schnittstelle, zurück zu index.html, und ändern Expect = chai.expect zu sollte = chai.should (). Jetzt können Sie Ihre Angaben so aktualisieren, dass sie wie folgt lautet:
person.age.should.be.über (0);
Welche Methode Sie wählen, liegt ganz bei Ihnen. Es gibt keine richtige Wahl. nur Präferenzen.
Um diesen Test auszuführen, kehren Sie zum Terminal zurück und geben Sie Folgendes ein:
Yeoman-Test
Wie erwartet, sollte der Test mit der Meldung fehlschlagen:Kann Variable nicht finden: Person.”Es ist ein Fehltest, aber was noch wichtiger ist, es funktioniert - wir testen! Da Yeoman das hervorragende PhantomJS-Tool (headless Webkit) nutzt, können diese Tests sogar ohne den Browser ausgeführt werden.
Wenn Sie Ihre Tests lieber in CoffeeScript schreiben möchten, müssen Sie einige Anpassungen vornehmen gruntfile.js. Beginnen Sie mit dem Hinzufügen eines neuen kompilieren Einwände gegen die Kompass Aufgabe. Geben Sie in diesem Objekt die Dateien an, die überwacht werden sollen. In diesem Fall weisen wir Grunt an, alle darin enthaltenen CoffeeScript-Dateien zu kompilieren Test / Spezifikation / Kaffee.
// Coffee to JS compilation coffee: dist: src: 'app / scripts / ** / *. Coffee', dest: 'app / scripts', compile: files: "test / spec /": " test / spec / coffee / *. coffee "
Der letzte Schritt ist, Grunt anzuweisen, dieses Verzeichnis im Auge zu behalten. Wenn eine Datei gespeichert wird, sollte sie entsprechend neu kompiliert werden.
Finden Sie das sehen Aufgabe und aktualisieren Sie die Kaffee Objekt wie folgt:
# tweet.text 