Share
Bisher haben Sie gelernt, wie Sie die Befehlszeile für die Paketverwaltung von Drittanbietern verwenden, Ihren Front-End-Code aktivieren, die Automatisierung mit Task-Läufern, das Live-Laden und die Browsersynchronisierung durchführen.
In diesem abschließenden Lernprogramm der Serie erfahren Sie, wie Sie die Befehlszeile verwenden, um Ihre Projekte zum Laufen zu bringen, indem Sie neue Projekte ausrüsten, die über den erforderlichen Drittanbietercode verfügen, sowie das bereits eingerichtete Grunt- oder Gulp-Aufgabenmanagement In nur wenigen Momenten.
Es gibt über tausend verschiedene Arten von Projekten, die Sie derzeit mithilfe der Befehlszeile ausrüsten können. In diesem Lernprogramm werden vier Projekte für Projekte auf der Grundlage folgender Elemente durchlaufen:
Foundation verfügt über eine eigene CLI (Command Line Interface), die sich hervorragend für Framework-Framework-Projekte eignet. Lassen Sie uns durchgehen, wie Sie die Foundation CLI verwenden, um ein Projekt mit Compass zu erstellen.
Der erste Teil des Gerüstbaus eines neuen Foundation-Projekts besteht in der Installation der erforderlichen CLI. Bevor Sie dies tun, müssen Sie sicherstellen, dass auf Ihrem System fünf Voraussetzungen installiert sind:
Wir behandelten die Installation von NodeJS, Git und Bower in Taming 3rd Party Packages, die Installation von Ruby wurde in Powering Up Front End Code behandelt und die Installation von grunt-cli in Automation with Task Runners.
Nachdem Sie sichergestellt haben, dass Ruby installiert ist, müssen Sie die Compass- und Bundler-Gems mit den folgenden Befehlen installieren:
gem installieren kompass
gem install Bundle
Jetzt können Sie die Foundation CLI mit diesem Befehl installieren:
gem installieren grundlage
Wenn Sie jetzt ein neues Foundation-Projekt starten möchten, öffnen Sie ein Terminal, in dem Sie es erstellen möchten, und führen Sie den Befehl aus
Gründung neuer Projektname
Die neu erstellte Projektordnerstruktur wird dann wie folgt generiert:
Von hier aus müssen Sie ein Terminal in Ihrem aktuellen Projektordner haben, z. in "Projektname".
Der zuvor installierte „Bundler-Edelstein“ wird hier verwendet, um sicherzustellen, dass alle erforderlichen Bibliotheken installiert wurden. Holen Sie sich alles in Ordnung, indem Sie den Befehl ausführen:
bündeln
Sie müssen dies nur einmal tun, wenn Sie Ihre Foundation Compass-Projekte erstellen.
Im Browser sieht Ihr neues Projekt folgendermaßen aus:
Sie können jetzt mit der Entwicklung Ihres Projekts beginnen. Es gibt einen eingebauten Sass-Compiler, der die ".scss" -Dateien in der Bibliothek auf Änderungen prüft und sie dann für Sie in css neu kompiliert. Aktivieren Sie es mit dem Befehl:
Bündel Exec Compass Watch
Yeoman ist ein Werkzeug, das speziell für das Gerüst neuer Projekte konzipiert wurde. Es funktioniert auf NodeJS, integriert Bower für die Paketverwaltung und verwendet Grunt oder Gulp für die Ausführung von Aufgaben.
Nach der Installation von Yeoman wird der grundlegende Prozess für das Gerüst eines neuen Projekts folgendermaßen:
Accentsconagua
yo um ein neues Projekt zu erzeugen, z. yo h5bp Lesen Sie mehr über Yeoman unter: http://yeoman.io/
Um Yeoman verwenden zu können, müssen Sie Bower, Grunt-Cli und Gulp global installiert haben, was Sie zu diesem Zeitpunkt haben sollten, solange Sie alle Tutorials der bisherigen Serie durchlaufen haben.
Installieren Sie Yeoman global mit dem Befehl:
npm install -g yo
Jetzt sind Sie bereit, Generatoren und neue Projekte zu finden.
Um ein Bootstrap-Projekt auszuarbeiten, verwenden wir generator-gulp-bootstrap. Dieser Generator ermöglicht Ihnen unter anderem das Bootstrap-Framework, jQuery & Modernizr, BrowserSync, automatische Sass-Kompilierung über LibSass, automatisches JS-Linting und Bildoptimierung.
Installieren Sie den Generator global mit:
[sudo] npm install -g generator-gulp-bootstrap
Richten Sie Ihr Terminal dorthin, wo Sie Ihr neues Projekt einrichten und ausführen möchten:
yo gulp-bootstrap
Sie erhalten eine kleine Anzeige wie diese in Ihrem Terminal und Sie können überprüfen, ob Sie Bootstrap und Modernizr verwenden möchten:
Nachdem der Generator ausgeführt wurde, haben Sie eine Ordnerstruktur wie folgt:
Um Ihr Projekt zu erstellen, verwenden Sie den Befehl:
Schluck
So starten Sie eine lokale Vorschau mit automatischem Kompilierungs- und Neuladevorgang:
schluck zu sehen
In einem Browser sieht Ihr neues Bootstrap-Projekt folgendermaßen aus:
Um ein neues HTML5-Boilerplate-Projekt zu erstellen, verwenden wir generator-h5bp.
Installieren Sie den Generator global mit:
[sudo] npm install generator-h5bp -g
Rüsten Sie Ihr neues Projekt mit diesem Befehl aus:
yo h5bp
Sie können auswählen, ob Sie Dokumente in Ihr Projekt aufnehmen möchten oder nicht. Der Generator wird dann ausgeführt.
Sie haben dann ein neues HTML5-Boilerplate-Projekt wie folgt strukturiert:
In einem Browser wird nur eine einfache "Hallo Welt!" -Meldung angezeigt. Wenn Sie jedoch den Code anzeigen, haben Sie alles, was Sie benötigen, um Ihre HTML5-Site in Gang zu setzen:
Das Web Starter Kit ist ein Projekt von Google, das als "Boilerplate & Tooling für die Entwicklung mehrerer Geräte" konzipiert wurde. Sie können alles über seine Funktionen unter https://developers.google.com/web/starter-kit/ nachlesen.
Um es herauszufinden, verwenden wir generator-mobile.
Installieren Sie den Generator global mit:
[sudo] npm installiere yeoman / generator-mobile -g
Rüsten Sie Ihr GWSK-Projekt mit dem Befehl aus:
Ihr Handy
In Ihrem Terminal beantworten Sie eine Reihe von Fragen, auf deren Grundlage Ihr Projekt erstellt wird:
Wenn der Generator mit der Ausführung fertig ist, hat Ihr neues Projekt die folgende Struktur:
Um eine BrowserSync-basierte Localhost-Vorschau zu öffnen, führen Sie diesen Befehl aus:
Schluck servieren
Die Vorschau Ihrer Site sieht folgendermaßen aus:
Hinweis: Nach dem Ausführen des Befehls gulp serv wird möglicherweise eine Fehlermeldung angezeigt, dass Browser-Sync nicht gefunden werden konnte. Wenn ja, installieren Sie es manuell mit folgendem Befehl in Ihren Ordner:
[sudo] npm Installiert die Browsersynchronisierung
Führen Sie den folgenden Befehl aus, um das gesamte Projekt zu erstellen:
Schluck
So erhalten Sie Feedback zur Geschwindigkeit Ihres Projektlaufs:
Schluck Seitengeschwindigkeit
Dieser Befehl gibt Ihnen die Möglichkeit, "pagespeed" -Daten in Ihrem Terminal auszulesen:
Wenn Sie sich beim Scaffolding Ihres Projekts für eine der Hosting-Optionen entschieden haben, veröffentlichen Sie Ihre Site mit:
Schluck bereitstellen
Für dieses Tutorial ist es genau das Richtige - Sie haben jetzt eine Reihe von Tools an Ihren Fingerspitzen, um mit ein paar gängigen Front-End-Frameworks die gesamte Kommandozeile zu nutzen!
