Foundation 6 命令行工具入門指南

Foundation 6 提供多種使用方式和工具。您可以下載靜態(tài)文件，或使用 Yeti Launch（一款適用于 Mac 的桌面應(yīng)用程序，Windows 版本即將推出）。

鮮為人知的是，F(xiàn)oundation 6 還提供了一套命令行工具，本文將對此進(jìn)行介紹。Foundation 6 是一款非常靈活的前端框架，除了許多明顯的 CSS 功能和 JavaScript 插件外，還擁有強(qiáng)大的開發(fā)者工具。

關(guān)鍵要點(diǎn)

• Foundation 6 提供了一套命令行工具，使開發(fā)者能夠更好地控制構(gòu)建過程，包括 SCSS 編譯、連接、壓縮、圖像優(yōu)化和模板。
• 要使用 Foundation 6 的 CLI 工具，開發(fā)者需要安裝 NodeJS、npm、Git、Gulp 和 Bower。可以使用 npm install --global foundation-cli 安裝 foundation-cli。
• Foundation CLI 在后臺使用 Gulp 和 Bower。Gulp 自動化開發(fā)工作流程中耗時(shí)的任務(wù)，而 Bower 是一個(gè) Web 包管理器，允許開發(fā)者通過命令行下載和安裝前端庫。
• 使用 Foundation CLI，開發(fā)者可以下載并安裝三個(gè) Foundation 框架（Sites、Apps 和 Emails）的空白模板。這些模板已預(yù)先配置為與 Gulp 和 Bower 配合使用。
• Foundation CLI 工具還預(yù)先配置了 BrowserSync，用于同步瀏覽器測試和實(shí)時(shí)重新加載。此功能允許開發(fā)者在多個(gè)設(shè)備和分辨率上查看實(shí)時(shí)更改，從而提高前端開發(fā)效率。

何時(shí)使用 Foundation 的 CLI 工具？

您可能想知道，既然可以使用靜態(tài) JavaScript 和 CSS 文件（效果很好），為什么還要費(fèi)心使用 CLI 工具呢？您可能需要標(biāo)準(zhǔn)結(jié)構(gòu)和易于使用的流程，這沒問題。

我相信您可以通過這種方式實(shí)現(xiàn)目標(biāo)，但我了解許多開發(fā)者希望更好地控制構(gòu)建過程。這包括 SCSS 編譯、連接、壓縮、圖像優(yōu)化和模板。我更喜歡使用這些額外的工具。因此，在某些情況下，CLI 工具可能是更好的選擇。

如果您經(jīng)常使用命令行，但不確定 Foundation 6 在這方面提供了什么，或者您不使用命令行，并且可能想學(xué)習(xí)一些新東西，那么本文適合您。

開始使用

首先，您需要安裝 NodeJS 和 npm 工具（通常與 NodeJS 一起安裝）。您還需要 Git、Gulp 和 Bower，foundation-cli 將使用所有這些工具。您可以運(yùn)行以下命令進(jìn)行安裝：

$ npm install --global gulp bower

在某些系統(tǒng)上，您可能需要超級用戶訪問權(quán)限，尤其是在全局安裝 npm 包時(shí)，因此您可能需要在本文中描述的命令前使用 sudo。

安裝 foundation-cli

如果您已經(jīng)在計(jì)算機(jī)上安裝了 Foundation 5 CLI，則只能訪問一個(gè)命令（具體取決于您的命令行環(huán)境配置）。因此，最好先刪除舊工具。您可以使用以下命令執(zhí)行此操作：

$ npm install --global gulp bower

然后安裝新的 CLI 工具：

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

您可以在 Foundation 的文檔中閱讀有關(guān)安裝的更多信息。

如果您不想在系統(tǒng)上安裝 foundation-cli，并且過去安裝過 Gulp 和 Bower，則只需克隆包含 Foundation 模板的存儲庫，然后使用 gulp 和 npm 命令，而不是 foundation 命令。一切應(yīng)該與使用 foundation-cli 時(shí)相同。

Foundation CLI 提供了什么？

如前所述，F(xiàn)oundation CLI 在后臺使用 Gulp 和 Bower。什么是 Gulp 和 Bower？Gulp 是一款工具包，可幫助您自動化開發(fā)工作流程中繁瑣或耗時(shí)的任務(wù)。在這里，我們可以考慮 SCSS 編譯、壓縮、連接，還可以進(jìn)行圖像壓縮或其他有用的任務(wù)。Bower 是一個(gè) Web 包管理器，允許您通過命令行下載和安裝前端庫。例如，安裝 jQuery 只需一行命令：bower install jquery。

Foundation CLI 下載并安裝三個(gè) Foundation 框架（Sites、Apps 和 Emails）的空白模板。所有這些模板都已準(zhǔn)備好與 Gulp 和 Bower 配合使用，并預(yù)先配置了 Gulp 任務(wù)和 Bower 安裝源。這類似于 Yeoman 等工具。

使用 Foundation CLI

安裝 foundation-cli 后，您可以通過運(yùn)行以下命令開始使用它：

$ npm install --global foundation-cli

如您所見，我們使用的是 foundation 而不是 foundation-cli。此外，我們只查看 Foundation for Sites 的 zurb 高級模板。我們需要使用 --framework 標(biāo)志選擇正確的框架，還需要使用 --template 標(biāo)志選擇正確的模板。您也可以選擇基本模板，但我認(rèn)為如果您想仔細(xì)查看，高級模板要好得多。

安裝后，您應(yīng)該有一個(gè)項(xiàng)目文件夾（名稱在安裝過程中提供）。此外，所有依賴項(xiàng)都應(yīng)安裝在那里。您現(xiàn)在需要做的就是進(jìn)入新創(chuàng)建的項(xiàng)目并進(jìn)入文件夾，然后運(yùn)行：

$ foundation new --framework sites --template zurb

這就是神奇之處！這將運(yùn)行 Gulp 構(gòu)建和服務(wù)器任務(wù)以及 watch 命令。這意味著它會觸發(fā)所有已配置的 Gulp 任務(wù)，您可以在代碼中看到這些任務(wù)。因此，當(dāng)您運(yùn)行此命令時(shí)，您應(yīng)該在控制臺中看到一些信息。目前最重要的信息是：

$ foundation watch

這里有關(guān)于您正在運(yùn)行的服務(wù)器的信息。第一個(gè)是您的實(shí)際應(yīng)用程序，您還有一個(gè)用于 BrowserSync 測試的 UI 服務(wù)器（我們稍后會討論）。您可以看到您的應(yīng)用程序文件是從 dist 目錄提供的，您可以在瀏覽器中訪問 http://localhost:8000 并查看標(biāo)準(zhǔn)的 Foundation 6 啟動模板。

查看內(nèi)部內(nèi)容

我認(rèn)為這是最令人興奮的部分，但在進(jìn)入這一步之前，我們必須完成所有安裝過程。

文件夾結(jié)構(gòu)、Gulpfile.js、JavaScript/CSS 資源

讓我們來看看新創(chuàng)建項(xiàng)目的文件夾結(jié)構(gòu)。最重要的文件夾是 src 和 dist。您的開發(fā)工作主要在 src 文件夾中完成，所有生產(chǎn)文件都將在 dist 文件夾中準(zhǔn)備。您運(yùn)行的服務(wù)器也從該文件夾提供文件。這意味著您可以根據(jù)需要準(zhǔn)備工作區(qū)，但最終，生產(chǎn)就緒文件將位于 dist 文件夾中，這就是您想要作為成品提供的內(nèi)容。

那么，這是如何實(shí)現(xiàn)的呢？讓我們來看看這里最重要的文件——gulpfile.js。如果您不熟悉 Gulp，您可能需要查看此入門教程。Gulp 看起來并不像一開始那么可怕，但它很重要，因?yàn)檫@是所有神奇之處發(fā)生的地方。

Gulp 基于許多 Gulp 插件，這些插件通過簡單的 npm 包添加附加功能。在這個(gè)新的 Foundation 項(xiàng)目中，它們在 package.json 中定義。它們在運(yùn)行 foundation new（如上所述）時(shí)也會自動下載和安裝，因此您無需擔(dān)心。

當(dāng)您打開 Gulp 文件時(shí)，您可以看到每個(gè)任務(wù)（例如 clean、copy、sass 和 JavaScript）都使用負(fù)責(zé)此特定工作部分的特殊 Gulp 插件以類似的方式定義。此外，如您在文件底部所見，還有諸如“build”或“default”之類的主要任務(wù)，它們會聚合其他任務(wù)。Foundation 樣板已配置，因此您基本上無需執(zhí)行任何操作。當(dāng)然，您可以根據(jù)需要進(jìn)行調(diào)整。

通過這種配置，您可以在 src/assets/scss 文件夾中編寫 scss，可以在 src/assets/js 文件夾中編寫 JavaScript 文件。您還可以將圖像放在 src/assets/img 文件夾中。當(dāng)您運(yùn)行 foundation watch 或 foundation build 時(shí)，所有這些文件都將被復(fù)制到 dist 文件夾。根據(jù)選項(xiàng)，它們可以被壓縮，或者圖像可以被優(yōu)化。所有這些都在 gulpfile.js 中配置。

Gulp 配置及其插件是另一篇文章的主題?，F(xiàn)在讓我們來看看 .html 文件，并使用 Panini 創(chuàng)建高級布局和關(guān)系。

Panini 和 Handlebars 模板

Panini 是 Foundation 團(tuán)隊(duì)構(gòu)建的一個(gè)很棒且簡單的工具。使用 Panini，您可以創(chuàng)建具有前后一致的布局和可重用部分的頁面。

在您的 dist 文件夾中，您有可立即使用的靜態(tài) HTML 文件。當(dāng)然，如果您只有一個(gè)文件，一切都很簡單。當(dāng)您想要創(chuàng)建許多具有幾個(gè)相同部分的 HTML 文件時(shí)，可能會出現(xiàn)問題。它可以是頁腳、側(cè)邊欄、頁眉或許多其他被稱為“部分”的元素。

如果沒有 Panini，您需要將所有重復(fù)的代碼復(fù)制到每個(gè) HTML 文件中，如果需要更改，您必須要么在每個(gè)文件中手動進(jìn)行更改，要么在文本編輯器中進(jìn)行查找和替換。使用 Panini，您可以在編輯時(shí)在一個(gè)地方完成所有這些操作，所有文件都將被編輯并復(fù)制到 dist 文件夾中。

同樣重要的是，Panini 基于 Handlebars 模板庫。它也可以在您的 HTML 文件中編譯 Markdown。有關(guān) Panini 的更多信息，請參閱 Foundation 的文檔。

讓我們來看看項(xiàng)目中 Panini 模板的文件夾結(jié)構(gòu)。我們需要打開 src 文件夾。在這里，我們有 data、layouts、pages 和 partials。正如您所料，在 layouts 文件夾中，我們可以編寫我們的主要布局腳手架。在這里，我們可以定義一個(gè)頁眉和頁腳，這些頁眉和頁腳將在所有頁面上重復(fù)。

如果您只想使用一個(gè)布局，只需將文件命名為 default.html 即可。您將在我們的項(xiàng)目中找到這樣的演示文件。如果您想使用多個(gè)布局，您可以創(chuàng)建更多具有特殊 body 標(biāo)記 {{> body}}（參見 default.html 示例）的文件，并且您需要在頁面中使用特殊標(biāo)記來告訴編譯器頁面應(yīng)該使用哪個(gè)布局。這稱為 Front Matter，如下所示：

$ npm install --global gulp bower

這些標(biāo)記應(yīng)放置在頁面文件內(nèi)容的頂部。這僅適用于將使用此布局的頁面，所有其他頁面都將使用默認(rèn)布局。

讓我們來看看 pages 文件夾。在此文件夾中，您會找到 index.html 文件，這是一個(gè)內(nèi)容演示頁面。如您所見，它沒有任何 html 或 body 標(biāo)記。這是因?yàn)樗皇菍⒆⑷氲角懊嬗懻摰?default.html 布局中的內(nèi)容。當(dāng)然，您可以添加類似的頁面，但有些頁面可能使用不同的布局。

如果您想要一些小的、可重用的 HTML 元素，您可以在 partials 文件夾中創(chuàng)建它們。在我們的演示項(xiàng)目中沒有任何文件，但這非常簡單。只需創(chuàng)建一個(gè)包含 HTML 片段的文件，并為該文件命名即可。然后，在您的布局文件或頁面文件中，您可以通過使用類似 {{> my-partial-file}} 的內(nèi)容導(dǎo)入此部分（請注意，沒有文件擴(kuò)展名）。就是這樣。所有內(nèi)容都將被連接、編譯并復(fù)制到 dist 文件夾中。

還有一個(gè)名為 data 的文件夾。在這里，您可以以 .json 或 .yml 文件的格式提供一些數(shù)據(jù)。例如，假設(shè)我在 data 文件夾中有一個(gè) myList.json 文件，其內(nèi)容如下：

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

在布局頁面或部分 HTML 文件中，我可以使用類似以下內(nèi)容：

$ npm install --global foundation-cli

這允許您迭代 JSON 數(shù)據(jù)并生成一些 HTML。我們應(yīng)該得到一個(gè)項(xiàng)目列表，其中包含數(shù)組中的名稱。

如您所見，當(dāng)您想要創(chuàng)建復(fù)雜的 HTML 結(jié)構(gòu)并且不想重復(fù)自己時(shí)，Panini 是一款非常有用的工具。

BrowserSync：同步瀏覽器測試和實(shí)時(shí)重新加載

我討論的 Foundation CLI 工具的最后一個(gè)預(yù)配置功能是 BrowserSync。如您所知，前端工作很難，因?yàn)槟枰谠S多設(shè)備和許多分辨率上測試您的網(wǎng)站?，F(xiàn)在想象一下，您有一個(gè)大型表格，其中許多不同的設(shè)備連接到您的網(wǎng)站。當(dāng)您點(diǎn)擊某些內(nèi)容或滾動頁面時(shí)，所有設(shè)備都將執(zhí)行相同的操作。這很棒，因?yàn)槟梢詫?shí)時(shí)查看需要糾正的內(nèi)容以及哪些內(nèi)容效果不佳。

我們創(chuàng)建的項(xiàng)目會自動提供您的外部 IP 地址（見上文）。您可以獲取它并將其粘貼到所有不同設(shè)備的瀏覽器中，以連接到同一個(gè) BrowserSync 引擎并開始測試。

BrowserSync 還提供實(shí)時(shí)更改，因此，如果您保存某些內(nèi)容，它將出現(xiàn)在瀏覽器窗口中，而無需手動刷新頁面。它還將出現(xiàn)在所有連接的設(shè)備上，并且您可以免費(fèi)獲得所有這些功能，而無需使用 foundation-cli 和 zurb 模板進(jìn)行任何額外的工作。這有多棒？

結(jié)語

我個(gè)人認(rèn)為，Zurb Foundation 團(tuán)隊(duì)在為開發(fā)者提供強(qiáng)大的工具和腳手架方面做得非常出色。這也是重要的。不僅僅是一些可立即使用的插件和 CSS 樣式。使用 Foundation for Sites 6 是一次很棒的體驗(yàn)。想象一下，您可以使用 Foundation CLI 工具完成多少后端編程工作。您可以創(chuàng)建靜態(tài)網(wǎng)站和博客，它們也可能相當(dāng)先進(jìn)。更不用說，在許多情況下，靜態(tài)博客和網(wǎng)站甚至更快更好。

我強(qiáng)烈建議您仔細(xì)查看 Panini。您還可以在 npm 包自述文件中找到一些文檔。它可以完成許多我這里沒有描述的強(qiáng)大功能，例如 Markdown 編譯或自定義助手。您還可以閱讀有關(guān) Gulp 的信息，并仔細(xì)查看 foundation-cli 工具生成的 zurb 模板/項(xiàng)目中使用的所有 Gulp 任務(wù)。

還有一件事——我沒有提到壓縮的 CSS 和 JavaScript 文件。如果您使用的是 foundation watch 命令，則 dist 文件夾中將有 CSS 和 JavaScript 文件，但它們將未壓縮。如果您想要該文件夾中的生產(chǎn)就緒文件，只需運(yùn)行 foundation build 即可。如果您想了解有關(guān) foundation 命令的更多信息，只需運(yùn)行 foundation help 命令即可。當(dāng)您需要更新項(xiàng)目中的依賴項(xiàng)時(shí)，您可以運(yùn)行 foundation update。

總而言之，我希望您在這里學(xué)到了一些東西。如果您有任何疑問，請?jiān)谠u論中告訴我，或者查看我的個(gè)人資料，了解與我聯(lián)系的不同方式。

Foundation 6 CLI 工具常見問題解答 (FAQs)

使用 Foundation 6 的 CLI 工具的先決條件是什么？

要使用 Foundation 6 的 CLI 工具，您需要在系統(tǒng)上安裝 Node.js（0.12 或更高版本）和 Git。Node.js 是運(yùn)行命令行界面所需的 JavaScript 運(yùn)行時(shí)。Git 是一個(gè)版本控制系統(tǒng)，用于在軟件開發(fā)過程中跟蹤源代碼中的更改。如果您沒有安裝這些，您可以從官方網(wǎng)站下載 Node.js，從其官方網(wǎng)站下載 Git。安裝完成后，您可以開始使用 Foundation 6 的 CLI 工具。

如何安裝 Foundation 6 的 CLI 工具？

安裝 Foundation 6 的 CLI 工具很簡單。打開您的終端或命令提示符，然后鍵入以下命令：npm install foundation-cli --global。此命令告訴 npm（Node 包管理器）全局下載并安裝 Foundation CLI，以便可以在計(jì)算機(jī)上的任何目錄中使用它。安裝完成后，您可以通過在終端中鍵入 foundation -v 來驗(yàn)證它。這應(yīng)該會顯示安裝在系統(tǒng)上的 Foundation CLI 的版本。

如何使用 Foundation 6 的 CLI 工具創(chuàng)建新項(xiàng)目？

要使用 Foundation 6 的 CLI 工具創(chuàng)建新項(xiàng)目，請打開終端并導(dǎo)航到要創(chuàng)建項(xiàng)目的目錄。然后，鍵入以下命令：foundation new。這將提示您為項(xiàng)目選擇模板。您可以從基本模板、高級模板或自定義模板中選擇。選擇模板后，CLI 將使用項(xiàng)目的文

件創(chuàng)建一個(gè)新目錄，并安裝所有必要的依賴項(xiàng)。

Foundation 6 的 CLI 工具中有哪些可用的不同命令？

Foundation 6 的 CLI 工具提供了一些命令來幫助您管理項(xiàng)目。一些最常用的命令包括：foundation new（創(chuàng)建新項(xiàng)目）、foundation watch（啟動服務(wù)器并監(jiān)視文件的更改）、foundation build（將文件編譯成可用于生產(chǎn)的項(xiàng)目）和 foundation update（將項(xiàng)目的依賴項(xiàng)更新到最新版本）。

如何更新 Foundation 6 的 CLI 工具？

要更新 Foundation 6 的 CLI 工具，您可以使用 npm update 命令。打開您的終端，然后鍵入以下命令：npm update -g foundation-cli。此命令告訴 npm 檢查 foundation-cli 全局包的更新，并在可用時(shí)安裝它們。

如何卸載 Foundation 6 的 CLI 工具？

如果您需要卸載 Foundation 6 的 CLI 工具，可以使用 npm uninstall 命令。打開您的終端，然后鍵入以下命令：npm uninstall -g foundation-cli。此命令告訴 npm 從系統(tǒng)中刪除 foundation-cli 全局包。

我可以在多個(gè)項(xiàng)目上使用 Foundation 6 的 CLI 工具嗎？

是的，您可以在多個(gè)項(xiàng)目上使用 Foundation 6 的 CLI 工具。CLI 在系統(tǒng)上全局安裝，這意味著您可以在任何目錄中使用它。要創(chuàng)建新項(xiàng)目，只需導(dǎo)航到所需的目錄并使用 foundation new 命令即可。

Foundation 6 的 CLI 工具中基本模板和高級模板有什么區(qū)別？

Foundation 6 的 CLI 工具中的基本模板為項(xiàng)目提供了一個(gè)簡單的起點(diǎn)，只需要最少的設(shè)置。另一方面，高級模板包含用于更復(fù)雜項(xiàng)目的其他工具和配置。這些包括 Sass 編譯器、自動前綴器、JavaScript 連接器和源映射生成器。

如何使用 Foundation 6 的 CLI 工具編譯我的生產(chǎn)項(xiàng)目？

要編譯生產(chǎn)項(xiàng)目，可以使用 foundation build 命令。此命令會編譯您的 Sass 和 JavaScript 文件，壓縮您的 CSS 和 JavaScript，壓縮您的圖像，并將您的 HTML 文件復(fù)制到 dist（代表分發(fā)）文件夾中。此文件夾包含項(xiàng)目的所有可用于生產(chǎn)的文件。

如何對 Foundation 6 的 CLI 工具的問題進(jìn)行故障排除？

如果您在使用 Foundation 6 的 CLI 工具時(shí)遇到問題，您可以采取一些步驟進(jìn)行故障排除。首先，確保您的系統(tǒng)上安裝了最新版本的 Node.js 和 Git。如果問題仍然存在，請嘗試使用 npm update 命令更新 CLI。如果您仍然遇到問題，可以在他們的官方論壇或 GitHub 頁面上尋求 Foundation 社區(qū)的幫助。

以上是Foundation 6＆＃x27的CLI工具入門的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！