Foundation 6 命令行工具入門指南
Foundation 6 提供多種使用方式和工具。您可以下載靜態文件，或使用 Yeti Launch（一款適用於 Mac 的桌面應用程序，Windows 版本即將推出）。
鮮為人知的是，Foundation 6 還提供了一套命令行工具，本文將對此進行介紹。 Foundation 6 是一款非常靈活的前端框架，除了許多明顯的 CSS 功能和 JavaScript 插件外，還擁有強大的開發者工具。
npm install --global foundation-cli 安裝 foundation-cli。 您可能想知道，既然可以使用靜態 JavaScript 和 CSS 文件（效果很好），為什麼還要費心使用 CLI 工具呢？您可能需要標準結構和易於使用的流程，這沒問題。
我相信您可以通過這種方式實現目標，但我了解許多開發者希望更好地控制構建過程。這包括 SCSS 編譯、連接、壓縮、圖像優化和模板。我更喜歡使用這些額外的工具。因此，在某些情況下，CLI 工具可能是更好的選擇。
如果您經常使用命令行，但不確定 Foundation 6 在這方面提供了什麼，或者您不使用命令行，並且可能想學習一些新東西，那麼本文適合您。
首先，您需要安裝 NodeJS 和 npm 工具（通常與 NodeJS 一起安裝）。您還需要 Git、Gulp 和 Bower，foundation-cli 將使用所有這些工具。您可以運行以下命令進行安裝：
$ npm install --global gulp bower
在某些系統上，您可能需要超級用戶訪問權限，尤其是在全局安裝 npm 包時，因此您可能需要在本文中描述的命令前使用 sudo。
如果您已經在計算機上安裝了 Foundation 5 CLI，則只能訪問一個命令（具體取決於您的命令行環境配置）。因此，最好先刪除舊工具。您可以使用以下命令執行此操作：
$ npm install --global gulp bower
然後安裝新的 CLI 工具：
$ gem uninstall foundation $ npm uninstall --global foundation-cli
您可以在 Foundation 的文檔中閱讀有關安裝的更多信息。
如果您不想在系統上安裝 foundation-cli，並且過去安裝過 Gulp 和 Bower，則只需克隆包含 Foundation 模板的存儲庫，然後使用 gulp 和 npm 命令，而不是 foundation 命令。一切應該與使用 foundation-cli 時相同。
如前所述，Foundation CLI 在後台使用 Gulp 和 Bower。什麼是 Gulp 和 Bower？ Gulp 是一款工具包，可幫助您自動化開發工作流程中繁瑣或耗時的任務。在這裡，我們可以考慮 SCSS 編譯、壓縮、連接，還可以進行圖像壓縮或其他有用的任務。 Bower 是一個 Web 包管理器，允許您通過命令行下載和安裝前端庫。例如，安裝 jQuery 只需一行命令：bower install jquery。
Foundation CLI 下載並安裝三個 Foundation 框架（Sites、Apps 和 Emails）的空白模板。所有這些模板都已準備好與 Gulp 和 Bower 配合使用，並預先配置了 Gulp 任務和 Bower 安裝源。這類似於 Yeoman 等工具。
安裝 foundation-cli 後，您可以通過運行以下命令開始使用它：
$ npm install --global foundation-cli
如您所見，我們使用的是 foundation 而不是 foundation-cli。此外，我們只查看 Foundation for Sites 的 zurb 高級模板。我們需要使用 --framework 標誌選擇正確的框架，還需要使用 --template 標誌選擇正確的模板。您也可以選擇基本模板，但我認為如果您想仔細查看，高級模板要好得多。
安裝後，您應該有一個項目文件夾（名稱在安裝過程中提供）。此外，所有依賴項都應安裝在那裡。您現在需要做的就是進入新創建的項目並進入文件夾，然後運行：
$ foundation new --framework sites --template zurb
這就是神奇之處！這將運行 Gulp 構建和服務器任務以及 watch 命令。這意味著它會觸發所有已配置的 Gulp 任務，您可以在代碼中看到這些任務。因此，當您運行此命令時，您應該在控制台中看到一些信息。目前最重要的信息是：
$ foundation watch
這裡有關於您正在運行的服務器的信息。第一個是您的實際應用程序，您還有一個用於 BrowserSync 測試的 UI 服務器（我們稍後會討論）。您可以看到您的應用程序文件是從 dist 目錄提供的，您可以在瀏覽器中訪問 http://localhost:8000 並查看標準的 Foundation 6 啟動模板。
我認為這是最令人興奮的部分，但在進入這一步之前，我們必須完成所有安裝過程。
讓我們來看看新創建項目的文件夾結構。最重要的文件夾是 src 和 dist。您的開發工作主要在 src 文件夾中完成，所有生產文件都將在 dist 文件夾中準備。您運行的服務器也從該文件夾提供文件。這意味著您可以根據需要準備工作區，但最終，生產就緒文件將位於 dist 文件夾中，這就是您想要作為成品提供的內容。
那麼，這是如何實現的呢？讓我們來看看這裡最重要的文件——gulpfile.js。如果您不熟悉 Gulp，您可能需要查看此入門教程。 Gulp 看起來並不像一開始那麼可怕，但它很重要，因為這是所有神奇之處發生的地方。
Gulp 基於許多 Gulp 插件，這些插件通過簡單的 npm 包添加附加功能。在這個新的 Foundation 項目中，它們在 package.json 中定義。它們在運行 foundation new（如上所述）時也會自動下載和安裝，因此您無需擔心。
當您打開 Gulp 文件時，您可以看到每個任務（例如 clean、copy、sass 和 JavaScript）都使用負責此特定工作部分的特殊 Gulp 插件以類似的方式定義。此外，如您在文件底部所見，還有諸如“build”或“default”之類的主要任務，它們會聚合其他任務。 Foundation 樣板已配置，因此您基本上無需執行任何操作。當然，您可以根據需要進行調整。
通過這種配置，您可以在 src/assets/scss 文件夾中編寫 scss，可以在 src/assets/js 文件夾中編寫 JavaScript 文件。您還可以將圖像放在 src/assets/img 文件夾中。當您運行 foundation watch 或 foundation build 時，所有這些文件都將被複製到 dist 文件夾。根據選項，它們可以被壓縮，或者圖像可以被優化。所有這些都在 gulpfile.js 中配置。
Gulp 配置及其插件是另一篇文章的主題。現在讓我們來看看 .html 文件，並使用 Panini 創建高級佈局和關係。
Panini 是 Foundation 團隊構建的一個很棒且簡單的工具。使用 Panini，您可以創建具有前後一致的佈局和可重用部分的頁面。
在您的 dist 文件夾中，您有可立即使用的靜態 HTML 文件。當然，如果您只有一個文件，一切都很簡單。當您想要創建許多具有幾個相同部分的 HTML 文件時，可能會出現問題。它可以是頁腳、側邊欄、頁眉或許多其他被稱為“部分”的元素。
如果沒有 Panini，您需要將所有重複的代碼複製到每個 HTML 文件中，如果需要更改，您必須要么在每個文件中手動進行更改，要么在文本編輯器中進行查找和替換。使用 Panini，您可以在編輯時在一個地方完成所有這些操作，所有文件都將被編輯並複製到 dist 文件夾中。
同樣重要的是，Panini 基於 Handlebars 模板庫。它也可以在您的 HTML 文件中編譯 Markdown。有關 Panini 的更多信息，請參閱 Foundation 的文檔。
讓我們來看看項目中 Panini 模板的文件夾結構。我們需要打開 src 文件夾。在這裡，我們有 data、layouts、pages 和 partials。正如您所料，在 layouts 文件夾中，我們可以編寫我們的主要佈局腳手架。在這裡，我們可以定義一個頁眉和頁腳，這些頁眉和頁腳將在所有頁面上重複。
如果您只想使用一個佈局，只需將文件命名為 default.html 即可。您將在我們的項目中找到這樣的演示文件。如果您想使用多個佈局，您可以創建更多具有特殊 body 標記 {{> body}}（參見 default.html 示例）的文件，並且您需要在頁面中使用特殊標記來告訴編譯器頁面應該使用哪個佈局。這稱為 Front Matter，如下所示：
$ npm install --global gulp bower
這些標記應放置在頁面文件內容的頂部。這僅適用於將使用此佈局的頁面，所有其他頁面都將使用默認佈局。
讓我們來看看 pages 文件夾。在此文件夾中，您會找到 index.html 文件，這是一個內容演示頁面。如您所見，它沒有任何 html 或 body 標記。這是因為它只是將注入到前面討論的 default.html 佈局中的內容。當然，您可以添加類似的頁面，但有些頁面可能使用不同的佈局。
如果您想要一些小的、可重用的 HTML 元素，您可以在 partials 文件夾中創建它們。在我們的演示項目中沒有任何文件，但這非常簡單。只需創建一個包含 HTML 片段的文件，並為該文件命名即可。然後，在您的佈局文件或頁面文件中，您可以通過使用類似 {{> my-partial-file}} 的內容導入此部分（請注意，沒有文件擴展名）。就是這樣。所有內容都將被連接、編譯並複製到 dist 文件夾中。
還有一個名為 data 的文件夾。在這裡，您可以以 .json 或 .yml 文件的格式提供一些數據。例如，假設我在 data 文件夾中有一個 myList.json 文件，其內容如下：
$ gem uninstall foundation $ npm uninstall --global foundation-cli
在佈局頁面或部分 HTML 文件中，我可以使用類似以下內容：
$ npm install --global foundation-cli
這允許您迭代 JSON 數據並生成一些 HTML。我們應該得到一個項目列表，其中包含數組中的名稱。
如您所見，當您想要創建複雜的 HTML 結構並且不想重複自己時，Panini 是一款非常有用的工具。
我討論的 Foundation CLI 工具的最後一個預配置功能是 BrowserSync。如您所知，前端工作很難，因為您需要在許多設備和許多分辨率上測試您的網站。現在想像一下，您有一個大型表格，其中許多不同的設備連接到您的網站。當您點擊某些內容或滾動頁面時，所有設備都將執行相同的操作。這很棒，因為您可以實時查看需要糾正的內容以及哪些內容效果不佳。
我們創建的項目會自動提供您的外部 IP 地址（見上文）。您可以獲取它並將其粘貼到所有不同設備的瀏覽器中，以連接到同一個 BrowserSync 引擎並開始測試。
BrowserSync 還提供實時更改，因此，如果您保存某些內容，它將出現在瀏覽器窗口中，而無需手動刷新頁面。它還將出現在所有連接的設備上，並且您可以免費獲得所有這些功能，而無需使用 foundation-cli 和 zurb 模板進行任何額外的工作。這有多棒？
我個人認為，Zurb Foundation 團隊在為開發者提供強大的工具和腳手架方面做得非常出色。這也是重要的。不僅僅是一些可立即使用的插件和 CSS 樣式。使用 Foundation for Sites 6 是一次很棒的體驗。想像一下，您可以使用 Foundation CLI 工具完成多少後端編程工作。您可以創建靜態網站和博客，它們也可能相當先進。更不用說，在許多情況下，靜態博客和網站甚至更快更好。
我強烈建議您仔細查看 Panini。您還可以在 npm 包自述文件中找到一些文檔。它可以完成許多我這裡沒有描述的強大功能，例如 Markdown 編譯或自定義助手。您還可以閱讀有關 Gulp 的信息，並仔細查看 foundation-cli 工俱生成的 zurb 模板/項目中使用的所有 Gulp 任務。
還有一件事——我沒有提到壓縮的 CSS 和 JavaScript 文件。如果您使用的是 foundation watch 命令，則 dist 文件夾中將有 CSS 和 JavaScript 文件，但它們將未壓縮。如果您想要該文件夾中的生產就緒文件，只需運行 foundation build 即可。如果您想了解有關 foundation 命令的更多信息，只需運行 foundation help 命令即可。當您需要更新項目中的依賴項時，您可以運行 foundation update。
總而言之，我希望您在這裡學到了一些東西。如果您有任何疑問，請在評論中告訴我，或者查看我的個人資料，了解與我聯繫的不同方式。
要使用 Foundation 6 的 CLI 工具，您需要在系統上安裝 Node.js（0.12 或更高版本）和 Git。 Node.js 是運行命令行界面所需的 JavaScript 運行時。 Git 是一個版本控制系統，用於在軟件開發過程中跟踪源代碼中的更改。如果您沒有安裝這些，您可以從官方網站下載 Node.js，從其官方網站下載 Git。安裝完成後，您可以開始使用 Foundation 6 的 CLI 工具。
安裝 Foundation 6 的 CLI 工具很簡單。打開您的終端或命令提示符，然後鍵入以下命令：npm install foundation-cli --global。此命令告訴 npm（Node 包管理器）全局下載並安裝 Foundation CLI，以便可以在計算機上的任何目錄中使用它。安裝完成後，您可以通過在終端中鍵入 foundation -v 來驗證它。這應該會顯示安裝在系統上的 Foundation CLI 的版本。
要使用 Foundation 6 的 CLI 工具創建新項目，請打開終端並導航到要創建項目的目錄。然後，鍵入以下命令：foundation new。這將提示您為項目選擇模板。您可以從基本模板、高級模板或自定義模板中選擇。選擇模板後，CLI 將使用項目的文
件創建一個新目錄，並安裝所有必要的依賴項。
Foundation 6 的 CLI 工具提供了一些命令來幫助您管理項目。一些最常用的命令包括：foundation new（創建新項目）、foundation watch（啟動服務器並監視文件的更改）、foundation build（將文件編譯成可用於生產的項目）和foundation update（將項目的依賴項更新到最新版本）。
要更新 Foundation 6 的 CLI 工具，您可以使用 npm update 命令。打開您的終端，然後鍵入以下命令：npm update -g foundation-cli。此命令告訴 npm 檢查 foundation-cli 全局包的更新，並在可用時安裝它們。
如果您需要卸載 Foundation 6 的 CLI 工具，可以使用 npm uninstall 命令。打開您的終端，然後鍵入以下命令：npm uninstall -g foundation-cli。此命令告訴 npm 從系統中刪除 foundation-cli 全局包。
是的，您可以在多個項目上使用 Foundation 6 的 CLI 工具。 CLI 在系統上全局安裝，這意味著您可以在任何目錄中使用它。要創建新項目，只需導航到所需的目錄並使用 foundation new 命令即可。
Foundation 6 的 CLI 工具中的基本模板為項目提供了一個簡單的起點，只需要最少的設置。另一方面，高級模板包含用於更複雜項目的其他工具和配置。這些包括 Sass 編譯器、自動前綴器、JavaScript 連接器和源映射生成器。
要編譯生產項目，可以使用 foundation build 命令。此命令會編譯您的 Sass 和 JavaScript 文件，壓縮您的 CSS 和 JavaScript，壓縮您的圖像，並將您的 HTML 文件複製到 dist（代表分發）文件夾中。此文件夾包含項目的所有可用於生產的文件。
如果您在使用 Foundation 6 的 CLI 工具時遇到問題，您可以採取一些步驟進行故障排除。首先，確保您的系統上安裝了最新版本的 Node.js 和 Git。如果問題仍然存在，請嘗試使用 npm update 命令更新 CLI。如果您仍然遇到問題，可以在他們的官方論壇或 GitHub 頁面上尋求 Foundation 社區的幫助。
以上是Foundation 6＆＃x27的CLI工具入門的詳細內容。更多資訊請關注PHP中文網其他相關文章！
