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中文网其他相关文章！
