Rationalisierung des Web-Entwicklungs-Workflows mit Yeoman

Es gibt viele Tools, um Web-Apps zu erstellen, aber sie alle zusammenzufügen und sie in unseren Workflow zu integrieren, könnte wirklich umständlich sein. Wir neigen auch dazu, repetitive Aufgaben zu erledigen, wenn wir Web-Apps erstellen, wie das Erstellen von Dateien, das Erstellen von Ordnern und das Installieren einer Reihe von Frontend-Bibliotheken. Wäre es nicht besser, wenn wir diese Aufgabe rationalisieren könnten, um Zeit zu sparen?

Wir können mit einem handlichen Tool namens Yeoman, erstellt von Addy Osmani. In diesem Beitrag werden wir sehen, wie Yo, Bower und Grunt unter Yeoman zusammenarbeiten können, um das Projekt vom Beginn der Entwicklung bis zum Einsatz der Web-App zu erleichtern.

Über Yeoman

Yeoman enthält drei Front-End-Entwicklungswerkzeuge:

1. Yo- Yo stellt eine Reihe von Generatoren zur Verfügung, die das Gerüst für den Aufbau neuer Webanwendungen generieren . Es stehen ca. 400 Generatoren zur Verfügung, die Sie über NPM (Node Package Manager) suchen und installieren können. Es gibt eine Vielzahl von Generatoren für verschiedene Arten von Web-Anwendungen, wie HTML5 Boilerplate, AngularJS, Bootstrap, etc. Und Sie können sogar Ihren eigenen Generator erstellen, wenn Sie möchten.

2. Bower - Mit Bower, einem Front-End-Paket-Manager, können Sie Projektbibliotheken verwalten, z. B. jQuery und Normalize.css oder andere Bibliotheken, die Sie normalerweise auf Ihrer Website verwenden.

3. Grunt - Grunt reduziert den Aufwand für einige Aufgaben im Entwicklungsprozess. Aufgaben wie das Minimieren und Verketten von Javascipt, das Generieren von CSS von LESS oder SASS, das Komprimieren von CSS und das Optimieren von Bildern können automatisch mit Grunt durchgeführt werden.

Yeoman kommt mit der Konfiguration dieser drei Front-End-Entwicklungstools voreingestellt. Yeoman stellt das Scaffold und den Paketmanager bereit und legt alle Grunt-Aufgaben zum Kompilieren von CSS-Präprozessoren, Linting- Skripten, Ausführen des integrierten Servers, Optimieren Ihrer Bilder usw. fest.

Erste Schritte mit Yeoman

Yeoman läuft auf Node.js, also stelle sicher, dass du zuerst Node.js und npm installiert hast. Um Yeoman dann zu installieren, führen Sie einfach diesen Befehl in der Eingabeaufforderung oder im Terminal aus:

 npm install -g yo 

Dieser Befehl installiert Yo, Bower und Grunt alle zusammen.

Nach der Installation von Yeoman können wir mit den Befehlszeilen ein Web-App-Projekt starten. Yo, wie oben erwähnt, hilft Ihnen, das Gerüst für Ihre Webanwendung mit den Generatoren zu generieren. Als Beispiel, hier werden wir einen von Yeoman's offiziellen Generatoren namens generator-webapp installieren .

 npm install -g Generator-Webanwendung 

Dieser Befehl lädt mehrere Komponenten herunter, die häufig zum Erstellen einer Webanwendung verwendet werden, nämlich HTML5 Boilerplate, jQuery, Modernizr und Bootstrap.

Sobald alle Komponenten aus der Generator-Webanwendung heruntergeladen wurden, erstellen Sie einen Ordner für Ihre Anwendung und führen Sie dann den Befehl yo webapp in diesem Ordner aus, um mit dem Generieren des Gerüsts für Ihr neues Webanwendungsprojekt zu beginnen.

Yeoman setzt Ihr Projekt mit den Komponenten von generator-webapp und fragt Sie, welche Bibliothek Sie am liebsten im Projekt verwenden, wie im folgenden Screenshot gezeigt. Treffen Sie Ihre Auswahl und in Ihrem Ordner finden Sie alle Dateien mit Bower und Grunt gut strukturiert.

Bootstrap durch Yeoman generieren

Jetzt werden wir einen anderen Generator ausprobieren, der von der Community namens Bootstrap-less bereitgestellt wird. Dieser Generator enthält HTML5 Boilerplate, jQuery, Modernizr, Bootstrap, FontAwesome und eine Grunt-Aufgabe, die LESS in CSS kompiliert.

Um diesen Generator zu installieren, führe diesen Befehl aus:

 npm install -g generator-bootstrap-less 

Erstellen Sie auf ähnliche Weise einen neuen Ordner für Ihr Projekt. Wechseln Sie dann zu dem Ordner, und führen Sie diesen Befehl aus, um das Gerüst für Ihre Webanwendung mit Bootstrap zu generieren:

 npm bootstrap-less 

Noch einmal, wir werden mit den Anweisungen von Yeoman interagieren, um die Komponenten auszuwählen, die für die Ausführung des Projekts benötigt werden. Wie Sie unten sehen können, können Sie Bootstrap-JavaScript-Dateien und FontAwesome zusammen auswählen.

Wenn Sie fertig sind, besuchen Sie den Projektordner erneut. Sie sollten jetzt den Ordner und die Dateien finden, die so erzeugt werden:

Dieses Projekt wurde auch mit einem Grunt-Server ausgestattet, der es uns ermöglicht, einen lokalen Webserver für unsere Webanwendung zu betreiben. Wir können den Server mit diesem Befehl ausführen:

 grunzen servieren 

Sobald dies geschehen ist, wird die Seite sofort im Browser geöffnet. Dieser Befehl überwacht auch unsere Dateien, wenn sich Änderungen am Entwicklungsprozess ergeben. Bootstrap-less Generator kommt mit Konfigurationen, die automatisch LESS-Dateien kompilieren.

Gehe zum Ordner app / styles, um die Datei main.less zu finden. Von hier aus können wir diese Datei ändern, Yeoman verarbeitet sie und der Browser wird die Seite automatisch neu laden und wir werden die Änderungen sehen.

Zuletzt verwenden wir den Befehl grunt, um unsere Anwendung zu erstellen.

Letzter Gedanke

Yeoman ist ein All-in-One-Tool für die Entwicklung einer Webanwendung. Es hilft Ihnen, beim Start eines neuen Webanwendungsprojekts effizienter zu sein, und stellt alle Tools bereit, um das Scaffold zu erstellen, zu testen und die Webanwendung bereitzustellen, sodass Sie sich ganz auf Ihr Coding konzentrieren können.

Facebook Roll Out Job Postings für Unternehmen und es ist kostenlos

Es ist kein Geheimnis, dass einige Unternehmen Facebook als einen Weg nutzen, um neue Mitarbeiter zu rekrutieren, wenn man bedenkt, dass das soziale Netzwerk von Millionen von Menschen besucht wird. Facebook ist sich dessen wahrscheinlich bewusst, weshalb das Unternehmen Tools einführt, die das Arbeitserlebnis im Service rationalisieren .

(Tech- und Design-Tipps)

10 Design-Funktionen Webmaster sollte (wahrscheinlich) vermeiden

Es gibt viele Fragen und Entscheidungen, die während der Webentwicklung getroffen werden, und die Beantwortung der Fragen, was zu berücksichtigen ist und was man weglässt, ist vielleicht eine der schwierigsten Aufgaben. Am schwersten in dem Sinne, dass viele Webmaster bis heute nicht wussten, was Internetnutzer auf einer Website nicht mögen .Was

(Tech- und Design-Tipps)