Foundation 6 命令行工具入門指南

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

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

關(guā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ā)工作流程中耗時的任務(wù)，而 Bower 是一個 Web 包管理器，允許開發(fā)者通過命令行下載和安裝前端庫。
• 使用 Foundation CLI，開發(fā)者可以下載並安裝三個 Foundation 框架（Sites、Apps 和 Emails）的空白模板。這些模板已預(yù)先配置為與 Gulp 和 Bower 配合使用。
• Foundation CLI 工具還預(yù)先配置了 BrowserSync，用於同步瀏覽器測試和實時重新加載。此功能允許開發(fā)者在多個設(shè)備和分辨率上查看實時更改，從而提高前端開發(fā)效率。

何時使用 Foundation 的 CLI 工具？

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

我相信您可以通過這種方式實現(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 將使用所有這些工具。您可以運行以下命令進行安裝：

$ npm install --global gulp bower

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

安裝 foundation-cli

如果您已經(jīng)在計算機上安裝了 Foundation 5 CLI，則只能訪問一個命令（具體取決於您的命令行環(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 時相同。

Foundation CLI 提供了什麼？

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

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

使用 Foundation CLI

安裝 foundation-cli 後，您可以通過運行以下命令開始使用它：

$ npm install --global foundation-cli

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

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

$ foundation new --framework sites --template zurb

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

$ foundation watch

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

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

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

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

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

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

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

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

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

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

Panini 和 Handlebars 模板

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

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

如果沒有 Panini，您需要將所有重複的代碼複製到每個 HTML 文件中，如果需要更改，您必須要么在每個文件中手動進行更改，要么在文本編輯器中進行查找和替換。使用 Panini，您可以在編輯時在一個地方完成所有這些操作，所有文件都將被編輯並複製到 dist 文件夾中。

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

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

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

$ npm install --global gulp bower

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

讓我們來看看 pages 文件夾。在此文件夾中，您會找到 index.html 文件，這是一個內(nèi)容演示頁面。如您所見，它沒有任何 html 或 body 標(biāo)記。這是因為它只是將注入到前面討論的 default.html 佈局中的內(nèi)容。當(dāng)然，您可以添加類似的頁面，但有些頁面可能使用不同的佈局。

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

還有一個名為 data 的文件夾。在這裡，您可以以 .json 或 .yml 文件的格式提供一些數(shù)據(jù)。例如，假設(shè)我在 data 文件夾中有一個 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)該得到一個項目列表，其中包含數(shù)組中的名稱。

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

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

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

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

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

結(jié)語

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

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

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

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

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

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

要使用 Foundation 6 的 CLI 工具，您需要在系統(tǒng)上安裝 Node.js（0.12 或更高版本）和 Git。 Node.js 是運行命令行界面所需的 JavaScript 運行時。 Git 是一個版本控制系統(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，以便可以在計算機上的任何目錄中使用它。安裝完成後，您可以通過在終端中鍵入 foundation -v 來驗證它。這應(yīng)該會顯示安裝在系統(tǒng)上的 Foundation CLI 的版本。

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

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

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

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

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

如何更新 Foundation 6 的 CLI 工具？

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

如何卸載 Foundation 6 的 CLI 工具？

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

我可以在多個項目上使用 Foundation 6 的 CLI 工具嗎？

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

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

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

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

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

如何對 Foundation 6 的 CLI 工具的問題進行故障排除？

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

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