Erste Schritte mit der CLI -Tools von Foundation 6.

Foundation 6 Befehlszeilen -Tools Erste Schritte Anleitung

Foundation 6 bietet eine Vielzahl von Möglichkeiten zur Verwendung und Tools. Sie können statische Dateien herunterladen oder den Yeti -Start verwenden (eine Desktop -Anwendung für Mac, Windows -Version wird in Kürze stattfinden).

Es ist wenig bekannt, dass die Foundation 6 auch eine Reihe von Befehlszeilen -Tools bietet, die in diesem Artikel beschrieben werden. Foundation 6 ist ein sehr flexibles Front-End-Framework, das zusätzlich zu vielen offensichtlichen CSS-Funktionen und JavaScript-Plugins leistungsstarke Entwickler-Tools hat.

Schlüsselpunkte

Foundation 6 bietet eine Reihe von Befehlszeilen-Tools, die den Entwicklern eine höhere Kontrolle über den Build-Prozess bieten, einschließlich SCSS-Kompilierung, Verbindung, Komprimierung, Bildoptimierung und Vorlagen.
Um das CLI -Tool von Foundation 6 zu verwenden, müssen Entwickler NodeJs, NPM, Git, Schluck und Bower installieren. Sie können Foundation-Cli mit
• installieren. npm install --global foundation-cli
Die Foundation CLI verwendet Gulp und Bower im Hintergrund. Gulp ist eine zeitaufwändige Aufgabe in automatisierten Entwicklungsworkflows, während Bower ein Webpaketmanager ist, mit dem Entwickler Front-End-Bibliotheken aus der Befehlszeile herunterladen und installieren können.
Verwenden der Foundation CLI können Entwickler leere Vorlagen für drei Foundation -Frameworks (Websites, Apps und E -Mails) herunterladen und installieren. Diese Vorlagen sind vorkonfiguriert, um mit Gulp und Bower zu arbeiten.
Das Foundation CLI-Tool ist auch mit Browsersync vorkonfiguriert, um Browser-Tests und Echtzeit-Nachladen zu synchronisieren. Mit dieser Funktion können Entwickler Echtzeitänderungen auf mehreren Geräten und Auflösungen anzeigen und so die Effizienz der Front-End-Entwicklung verbessern.

Wann verwenden Sie das CLI -Tool der Foundation?

Sie fragen sich vielleicht, da Sie statische JavaScript- und CSS -Dateien verwenden können (die sehr gut funktionieren), warum sollten Sie sich die Mühe machen, CLI -Tools zu verwenden? Möglicherweise benötigen Sie eine Standardstruktur und einen benutzerfreundlichen Prozess, der in Ordnung ist.

Ich glaube, Sie können Ihre Ziele auf diese Weise erreichen, aber ich verstehe, dass viele Entwickler mehr Kontrolle über den Build -Prozess wünschen. Dies umfasst SCSS -Kompilierung, Verbindung, Komprimierung, Bildoptimierung und Vorlagen. Ich bevorzuge diese zusätzlichen Werkzeuge. In einigen Fällen können CLI -Tools eine bessere Wahl sein.

Wenn Sie die Befehlszeile häufig verwenden und nicht sicher sind, welche Foundation 6 diesbezüglich bietet oder die Befehlszeile nicht verwenden und möglicherweise etwas Neues lernen möchten, ist dieser Artikel für Sie.

Gebraucht

Zunächst müssen Sie NodeJs und NPM -Tools (normalerweise mit NodeJS installiert) installieren. Sie benötigen auch Git, Gulp und Bower, und Foundation-CLI verwendet alle diese Tools. Sie können den folgenden Befehl ausführen, um zu installieren:

$ npm install --global gulp bower

Auf einigen Systemen benötigen Sie möglicherweise einen Superuser -Zugriff, insbesondere bei der globalen Installation von NPM -Paketen. Sie müssen daher möglicherweise

vor den in diesem Artikel beschriebenen Befehle verwenden. sudo

Foundation-cli

installieren

Wenn Sie bereits auf Foundation 5 CLI auf Ihrem Computer installiert sind, können Sie nur auf einen Befehl zugreifen (abhängig von Ihrer Befehlszeilenumgebungskonfiguration). Daher ist es am besten, das alte Werkzeug zuerst zu löschen. Sie können dies mit dem folgenden Befehl tun:

$ npm install --global gulp bower

und installieren Sie das neue CLI -Tool:

$ gem uninstall foundation
$ npm uninstall --global foundation-cli

Sie können mehr über die Installation in der Dokumentation der Stiftung erfahren.

Wenn Sie Foundation-CLI nicht in Ihrem System installieren möchten und Gulp und Bower in der Vergangenheit installiert haben, klonen Sie einfach das Repository mit Fundamentvorlagen und verwenden Sie die Befehle von Gulp und NPM anstelle des Foundation-Befehls. Alles sollte übereinstimmen wie bei der Verwendung von Foundation-Cli.

Was bietet Foundation CLI?

Wie bereits erwähnt, verwendet die Foundation CLI Gulp und Bower im Hintergrund. Was sind Schluck und Bower? Gulp ist ein Toolkit, mit dem Sie mühsame oder zeitaufwändige Aufgaben in Ihrem Entwicklungsworkflow automatisieren können. Hier können wir die SCSS -Kompilierung, Komprimierung, Verbindung in Betracht ziehen und auch Bildkomprimierung oder andere nützliche Aufgaben durchführen. Bower ist ein Webpaket-Manager, mit dem Sie Front-End-Bibliotheken aus der Befehlszeile herunterladen und installieren können. Die Installation von JQuery erfordert beispielsweise nur eine Befehlszeile: bower install jquery.

Foundation CLI Download und installieren Sie leere Vorlagen für drei Foundation -Frameworks (Websites, Apps und E -Mails). Alle diese Vorlagen sind bereit, mit Gulp und Bower zu arbeiten, und sind mit Gulp-Aufgaben und Bower-Installationsquellen vorkonfiguriert. Dies ähnelt Tools wie Yeoman.

Verwenden von Foundation Cli

Nach dem Installieren von Foundation-CLI können Sie es verwenden, indem Sie den folgenden Befehl ausführen:

$ npm install --global foundation-cli

Wie Sie sehen, verwenden wir foundation anstelle von foundation-cli. Darüber hinaus schauen wir uns nur die Zurb -Premium -Vorlagen für die Grundlage für Standorte an. Wir müssen das --framework -Logo verwenden, um den richtigen Frame auszuwählen, und wir müssen auch das --template -Logo verwenden, um die richtige Vorlage auszuwählen. Sie können auch eine grundlegende Vorlage auswählen, aber ich denke, dass erweiterte Vorlagen viel besser sind, wenn Sie genauer ansehen möchten.

Nach der Installation sollten Sie über einen Projektordner verfügen (der Name wird während des Installationsprozesses angegeben). Außerdem sollten dort alle Abhängigkeiten installiert werden. Alles, was Sie jetzt tun müssen, ist in das neu erstellte Projekt zu gehen und in den Ordner zu gehen und auszuführen:

$ foundation new --framework sites --template zurb

Das ist die Magie! Dadurch werden Gulp -Build- und Serveraufgaben sowie Beobachtungsbefehle ausgeführt. Dies bedeutet, dass alle konfigurierten Gulp -Aufgaben ausgelöst werden, die Sie in Ihrem Code sehen können. Wenn Sie diesen Befehl ausführen, sollten Sie einige Informationen in der Konsole sehen. Die wichtigsten Informationen derzeit sind:

$ foundation watch

Hier finden Sie Informationen über den Server, den Sie ausführen. Der erste ist Ihre tatsächliche Anwendung, und Sie haben auch einen UI -Server für BrowserSync -Tests (wir werden sie später diskutieren). Sie können feststellen, dass Ihre Anwendungsdateien aus dem DIST -Verzeichnis bereitgestellt werden. Sie können in Ihrem Browser auf http://localhost:8000 zugreifen und die Standard -Startvorlage der Standard -Foundation 6 anzeigen.

interne Inhalt ansehen

Ich denke, dies ist der aufregendste Teil, aber bevor wir an diesen Punkt kommen, müssen wir den gesamten Installationsprozess abschließen.

Ordnerstruktur, gulpFile.js, JavaScript/CSS Resources

src Schauen wir uns die Ordnerstruktur des neu erstellten Projekts an. Die wichtigsten Ordner sind dist und src. Ihre Entwicklungsarbeiten erfolgen hauptsächlich im Ordner dist, und alle Produktionsdateien werden im Ordner dist erstellt. Der Server, den Sie ausführen, serviert auch Dateien aus diesem Ordner. Dies bedeutet, dass Sie den Arbeitsbereich nach Bedarf vorbereiten können, aber schließlich befindet sich die produktionsbereite Datei im Ordner

, was Sie als fertiges Produkt bereitstellen möchten.

gulpfile.js Wie wird das implementiert? Schauen wir uns das wichtigste Dokument hier an -

. Wenn Sie mit Gulp nicht vertraut sind, sollten Sie sich dieses Einführungs -Tutorial ansehen. Gulp sieht nicht so beängstigend aus wie zuerst, aber es ist wichtig, weil hier die ganze Magie passiert.

package.json Gulp basiert auf vielen Gulp -Plugins, die zusätzliche Funktionen über einfache NPM -Pakete hinzufügen. In diesem neuen Foundation -Projekt sind sie in foundation new definiert. Sie werden auch automatisch heruntergeladen und installiert, wenn sie

ausgeführt werden (wie oben erwähnt), sodass Sie sich keine Sorgen machen müssen.

Wenn Sie eine Gulp -Datei öffnen, können Sie feststellen, dass jede Aufgabe (z. B. sauber, kopieren, sass und javaScript) auf ähnliche Weise definiert wird, indem Sie ein spezielles Gulp -Plugin für diesen spezifischen Arbeitsteil verantwortlich machen. Wie Sie am Ende der Datei sehen können, gibt es außerdem größere Aufgaben wie "Build" oder "Standard", die andere Aufgaben zusammenfassen. Die Foundation Boilerplate ist so konfiguriert, dass Sie im Grunde nichts tun müssen. Natürlich können Sie sich nach Bedarf anpassen.

src/assets/scss Mit dieser Konfiguration können Sie SCSS in den Ordner src/assets/js und javaScript -Dateien im Ordner src/assets/img schreiben. Sie können das Bild auch im Ordner foundation watch platzieren. Wenn Sie foundation build oder dist ausführen, werden alle diese Dateien in den Ordner gulpfile.js kopiert. Abhängig von den Optionen können sie komprimiert oder die Bilder optimiert werden. All dies ist in

konfiguriert.

Gulp -Konfiguration und ihre Plugins sind das Thema eines anderen Artikels. Schauen wir uns nun die .html -Datei an und verwenden Sie Panini, um erweiterte Layouts und Beziehungen zu erstellen.

Panini und Lenker Vorlagen

Panini ist ein großartiges und einfaches Tool, das vom Foundation -Team erstellt wurde. Mit Panini können Sie Seiten mit konsistenten Layouts und wiederverwendbaren Abschnitten erstellen.

dist In Ihrem

Ordner haben Sie statische HTML -Dateien, die Sie sofort verwenden können. Wenn Sie nur eine Datei haben, ist alles einfach. Es können Probleme auftreten, wenn Sie viele HTML -Dateien mit mehreren identischen Teilen erstellen möchten. Es kann sich um eine Fußzeile, eine Seitenleiste, eine Header oder viele andere Elemente bezeichnet, die als "Teile" bezeichnet werden.

Ohne Panini müssen Sie den gesamten doppelten Code in jede HTML -Datei kopieren. Wenn Sie sich ändern müssen, müssen Sie entweder in jeder Datei ändere Änderungen vornehmen oder in einem Texteditor ersetzen und ersetzen. Mit Panini können Sie das alles an einem Ort während der Bearbeitung erledigen, und alle Dateien werden bearbeitet und in den Ordner dist kopiert.

Ebenso wichtig ist Panini auf der Lenker -Vorlagenbibliothek. Es kann auch den Markdown in Ihrer HTML -Datei zusammenstellen. Weitere Informationen zu Panini finden Sie in der Dokumentation der Stiftung.

Schauen wir uns die Ordnerstruktur der Panini -Vorlage im Projekt an. Wir müssen den Ordner src öffnen. Hier haben wir Daten, Layouts, Seiten und Teilnehmer. Wie zu erwarten, können wir im Layouts -Ordner unser Hauptlayout -Gerüst schreiben. Hier können wir eine Header und Fußzeile definieren, die auf allen Seiten wiederholt wird.

Wenn Sie nur ein Layout verwenden möchten, nennen Sie einfach die Datei default.html. Sie finden eine solche Demo -Datei in unserem Projekt. Wenn Sie mehrere Layouts verwenden möchten, können Sie mehr Dateien mit speziellem Body -Tag {{> body}} erstellen (siehe default.html Beispiel), und Sie müssen auf der Seite spezielle Tags verwenden, um dem Compiler mitzuteilen, welches Layout die Seite verwenden sollte. Dies wird als Front Materie bezeichnet, wie unten gezeigt:

$ npm install --global gulp bower

Diese Markierungen sollten oben in den Inhalt der Seitendatei platziert werden. Dies gilt nur für Seiten, die dieses Layout verwenden, und alle anderen Seiten werden das Standardlayout verwendet.

Schauen wir uns den Ordner der Seiten an. In diesem Ordner finden Sie die index.html -Datei, die eine Inhalts -Demo -Seite ist. Wie Sie sehen können, gibt es keine HTML- oder Körper -Tags. Dies liegt daran, dass es nur in das zuvor diskutierte default.html -Layout injiziert wird. Natürlich können Sie ähnliche Seiten hinzufügen, aber einige Seiten können unterschiedliche Layouts verwenden.

Wenn Sie einige kleine, wiederverwendbare HTML -Elemente wünschen, können Sie sie im Ordner Partials erstellen. In unserem Demo -Projekt gibt es keine Dateien, aber es ist sehr einfach. Erstellen Sie einfach eine Datei mit HTML -Snippets und nennen Sie die Datei. Dann können Sie in Ihrer Layout -Datei oder Dateidatei diesen Abschnitt mithilfe von {{> my-partial-file}} importieren (Beachten Sie, dass es keine Dateierweiterung gibt). Das war's. Alle Inhalte werden angeschlossen, kompiliert und in den Ordner dist kopiert.

Es gibt auch einen Ordner namens Daten. Hier können Sie einige Daten im Format von .json- oder .yml -Dateien bereitstellen. Angenommen, ich habe eine myList.json -Datei im Datenordner, die den folgenden Inhalt enthält:

$ gem uninstall foundation
$ npm uninstall --global foundation-cli

In einer Layout -Seite oder einem Teil einer HTML -Datei kann ich so etwas wie folgt verwenden:

$ npm install --global foundation-cli

Dies ermöglicht es Ihnen, die JSON -Daten zu iterieren und einige HTML zu generieren. Wir sollten eine Liste von Elementen mit Namen im Array erhalten.

Wie Sie sehen, ist Panini ein sehr nützliches Werkzeug, wenn Sie komplexe HTML -Strukturen erstellen möchten und sich nicht wiederholen möchten.

browsersync: synchronisieren Browser-Tests und Echtzeit-Reload

Die letzte vorkonfigurierte Funktion des Foundation CLI -Tools, die ich besprochen habe, ist BrowserSync. Wie Sie wissen, ist Front-End-Arbeit schwierig, da Sie Ihre Website auf vielen Geräten und vielen Vorsätzen testen müssen. Stellen Sie sich nun vor, Sie haben einen großen Tisch, an dem viele verschiedene Geräte eine Verbindung zu Ihrer Website herstellen. Wenn Sie auf etwas klicken oder durch eine Seite scrollen, tun alle Geräte dasselbe. Dies ist großartig, weil Sie in Echtzeit sehen können, was korrigiert werden muss und was nicht gut funktioniert.

Die Projekte, die wir erstellen, geben automatisch Ihre externe IP -Adresse an (siehe oben). Sie können es abrufen und in Browser auf allen Geräten einfügen, um eine Verbindung zu demselben Browsersync -Motor herzustellen und zu testen.

BrowserSync bietet auch Änderungen in Echtzeit. Wenn Sie also etwas speichern, wird es im Browserfenster angezeigt, ohne die Seite manuell zu aktualisieren. Es wird auch auf allen verbundenen Geräten angezeigt, und Sie können alle diese Funktionen kostenlos ohne zusätzliche Arbeit mit Foundation-Cli- und Zurb-Vorlagen erhalten. Wie großartig ist das?

Schlussfolgerung

Ich persönlich denke, das Team der Zurb Foundation hat hervorragende Arbeit geleistet, um Entwicklern leistungsstarke Tools und Gerüste zu bieten. Dies ist auch wichtig. Mehr als nur einige Plugins und CSS -Stile, die sofort bereit sind. Die Verwendung von Foundation für Websites 6 war eine großartige Erfahrung. Stellen Sie sich vor, wie viel Backend -Programmierarbeiten Sie mit dem Foundation CLI -Tool erledigen können. Sie können statische Websites und Blogs erstellen und sie können auch ziemlich fortgeschritten sein. Ganz zu schweigen davon, dass statische Blogs und Websites in vielen Fällen noch schneller und besser sind.

Ich empfehle Ihnen dringend, sich Panini genauer anzusehen. Sie finden auch eine Dokumentation im NPM -Paket Readme. Es kann viele leistungsstarke Funktionen ausführen, die ich hier nicht beschreibe, wie z. B. Markdown -Kompilierung oder benutzerdefinierte Assistentin. Sie können auch über Gulp lesen und alle Gulp-Aufgaben sorgfältig anzeigen, die in der von der Foundation-Cli-Tool generierten Zurb-Vorlage/-projekt verwendet werden.

Eine weitere Sache - ich habe nicht komprimierte CSS- und JavaScript -Dateien erwähnt. Wenn Sie den Befehl foundation watch verwenden, gibt es im Ordner dist CSS und JavaScript -Dateien, aber sie werden nicht komprimiert. Wenn Sie in diesem Ordner produktionsbereite Dateien möchten, führen Sie einfach foundation build aus. Wenn Sie mehr über den Befehl der Stiftung erfahren möchten, führen Sie einfach den Befehl foundation help aus. Wenn Sie Abhängigkeiten in Ihrem Projekt aktualisieren müssen, können Sie foundation update ausführen.

Alles in allem hoffe ich, dass Sie hier etwas gelernt haben. Wenn Sie Fragen haben, teilen Sie es mir bitte in den Kommentaren mit oder überprüfen Sie mein Profil, um mich mit mir zu kontaktieren.

Foundation 6 CLI -Werkzeuge FAQs (FAQs)

Was sind die Voraussetzungen für die Verwendung der CLI -Tool von Foundation 6?

Um das CLI -Tool von Foundation 6 zu verwenden, müssen Sie Node.js (0.12 oder höher) und Git in Ihrem System installieren. Node.js ist die JavaScript -Laufzeit, die zum Ausführen der Befehlszeilenschnittstelle erforderlich ist. Git ist ein Versionskontrollsystem, das Änderungen im Quellcode während der Softwareentwicklung verfolgt. Wenn Sie diese nicht installiert haben, können Sie Node.js von der offiziellen Website und Git von seiner offiziellen Website herunterladen. Sobald die Installation abgeschlossen ist, können Sie die CLI -Tools von Foundation 6 verwenden.

So installieren Sie die CLI -Tool von Foundation 6?

Die Installation des CLI -Tools für Foundation 6 ist einfach. Öffnen Sie Ihren Terminal oder die Eingabeaufforderung und geben Sie den folgenden Befehl ein: npm install foundation-cli --global. In diesem Befehl wird NPM (Node Package Manager) angegeben, die Foundation CLI weltweit herunterzuladen und zu installieren, damit sie in jedem Verzeichnis auf Ihrem Computer verwendet werden kann. Sobald die Installation abgeschlossen ist, können Sie sie durch Eingeben von foundation -v im Terminal überprüfen. Dies sollte die Version der auf dem System installierten Foundation CLI angezeigt.

Wie erstelle ich ein neues Projekt mit dem CLI -Tool von Foundation 6?

Erstellen eines neuen Projekts mit dem CLI -Tool der Foundation 6, öffnen Sie ein Terminal und navigieren Sie zum Verzeichnis, in dem Sie das Projekt erstellen möchten. Geben Sie dann den folgenden Befehl ein: foundation new. Auf diese Weise werden Sie aufgefordert, eine Vorlage für Ihr Projekt auszuwählen. Sie können aus grundlegenden Vorlagen, erweiterten Vorlagen oder benutzerdefinierten Vorlagen auswählen. Nach Auswahl der Vorlage verwendet die CLI den Text

des Projekts

Erstellen Sie ein neues Verzeichnis und installieren Sie alle erforderlichen Abhängigkeiten.

Was sind die verschiedenen Befehle im CLI -Tool für Foundation 6 verfügbar?

Das CLI -Tool für Foundation 6 bietet einige Befehle, mit denen Sie Ihre Projekte verwalten können. Einige der am häufigsten verwendeten Befehle umfassen: foundation new (ein neues Projekt erstellen), foundation watch (starten Sie den Server und überwachen Sie die Dateiänderungen), foundation build (kompilieren Sie die Datei in ein Projekt, das für die Produktion verwendet werden kann). und foundation update (Ersetzen Sie die Projekt -Aktualisierungen die Abhängigkeiten für die neueste Version).

Wie aktualisiert ich die CLI -Tool von Foundation 6?

Um die CLI -Tool von Foundation 6 zu aktualisieren, können Sie den Befehl npm update verwenden. Öffnen Sie Ihr Terminal und geben Sie den folgenden Befehl ein: npm update -g foundation-cli. Dieser Befehl gibt NPM mit, dass sie nach Updates zu Global Pakete von Foundation-Cli-Paketen suchen und sofern verfügbar installiert werden.

Wie deinstalliere das CLI -Tool von Foundation 6?

Wenn Sie das CLI -Tool von Foundation 6 deinstallieren müssen, können Sie den Befehl npm uninstall verwenden. Öffnen Sie Ihr Terminal und geben Sie den folgenden Befehl ein: npm uninstall -g foundation-cli. Dieser Befehl sagt NPM, das Global Package Foundation-CLI aus dem System zu löschen.

Kann ich das CLI -Tool von Foundation 6 für mehrere Projekte verwenden?

Ja, Sie können die CLI -Tools von Foundation 6 für mehrere Projekte verwenden. Die CLI ist weltweit auf dem System installiert, sodass Sie sie in jedem Verzeichnis verwenden können. Um ein neues Projekt zu erstellen, navigieren Sie einfach zum gewünschten Verzeichnis und verwenden Sie den Befehl foundation new.

Was ist der Unterschied zwischen grundlegenden Vorlagen und erweiterten Vorlagen im CLI -Tool der Foundation 6?

Die Grundvorlagen im CLI -Tool in Foundation 6 bieten einen einfachen Ausgangspunkt für das Projekt, das nur minimale Einstellungen erfordern. Erweiterte Vorlagen hingegen enthalten zusätzliche Tools und Konfigurationen für komplexere Projekte. Dazu gehören der SASS -Compiler, der automatische Präfixer, den JavaScript -Connector und den Quell -Map -Generator.

Wie kann ich mein Produktionsprojekt mit dem CLI -Tool von Foundation 6 kompilieren?

Um ein Produktionsprojekt zu kompilieren, verwenden Sie den Befehl foundation build. Dieser Befehl kompiliert Ihre Sass- und JavaScript -Dateien, komprimiert Ihre CSS und JavaScript, komprimiert Ihre Bilder und kopiert Ihre HTML -Dateien in den DIST -Ordner. Dieser Ordner enthält alle Dateien, die für die Produktion für das Projekt verfügbar sind.

Wie kann Probleme mit dem CLI -Tool in Foundation 6 Fehler beheben?

Wenn Sie Probleme mit dem CLI -Tool von Foundation 6 haben, können Sie einige Schritte zur Fehlerbehebung unternehmen. Stellen Sie zunächst sicher, dass die neuesten Versionen von Node.js und Git in Ihrem System installiert sind. Wenn das Problem weiterhin besteht, aktualisieren Sie die CLI mit dem Befehl npm update. Wenn Sie immer noch Probleme haben, können Sie in ihrem offiziellen Forum oder auf der Github -Seite Hilfe von der Stiftungsgemeinschaft suchen.

Das obige ist der detaillierte Inhalt vonErste Schritte mit der CLI -Tools von Foundation 6.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!