入门指南：Foundation 6 的命令行工具

最近发布的 Foundation 6 提供了多种使用方式。你可以下载静态文件，或者使用 Yeti Launch，这是一款为 Mac 设计的特殊桌面应用（Windows 版本即将推出）。

一个不太为人所知的特性是 Foundation 6 附带的一套命令行工具，这将是本文的重点。Foundation 6 是一个非常灵活的前端框架，除了许多显而易见的 CSS 特性和 JavaScript 插件外，还拥有出色的开发者工具。

关键要点

• Foundation 6 提供了一套命令行工具，使开发者能对构建过程进行更多控制，包括 SCSS 编译、文件合并、压缩、图像优化和模板处理。
• 要使用 Foundation 6 的 CLI 工具，开发者需要安装 NodeJS、npm、Git、Gulp 和 Bower。可以通过 npm install --global foundation-cli 安装 foundation-cli。
• Foundation CLI 底层使用了 Gulp 和 Bower。Gulp 自动化了开发流程中耗时的任务，而 Bower 是 Web 包管理器，允许开发者通过命令行下载和安装前端库。
• 使用 Foundation CLI，开发者可以下载并安装针对其三个框架（Sites、Apps、Emails）中任何一个的空白模板。这些模板预先配置了 Gulp 和 Bower。
• Foundation CLI 工具还预配置了 BrowserSync，用于同步浏览器测试和实时重载。此功能允许开发者在多个设备和分辨率上实时查看更改，从而提高前端开发效率。

我何时会想使用 Foundation 的 CLI 工具？

你可能想问，既然有可以正常工作的静态 JavaScript 和 CSS 文件，为什么还要费心使用 CLI 工具？你可能需要标准结构和易于使用的工作流程，这没问题。

我相信你可以通过那种方式实现目标，但我知道有许多开发者希望对构建过程获得更多控制。这包括 SCSS 编译、文件合并、压缩、图像优化和模板处理。我更喜欢能访问这些额外的工具。因此，在某些使用场景下，CLI 工具可能是更好的选择。

如果你经常使用命令行，但不完全清楚 Foundation 6 在这方面提供了什么，或者你不使用命令行但想学习新东西，那么这篇文章正适合你。

开始使用

要开始使用，有一些先决条件。你需要安装 NodeJS，以及应该随 NodeJS 一起安装的 npm 工具。你还需要 Git、Gulp 和 Bower，我们的 foundation-cli 将会用到这些。你可以通过运行以下命令来安装它们：

1

$ npm install --global gulp bower

在某些系统上，你可能需要超级用户访问权限，尤其是在使用 npm 全局安装东西时，因此你可能需要在本文中描述的这些命令前加上 sudo。

安装 foundation-cli

如果你的机器上已经安装了 Foundation 5 CLI，根据你的命令行环境配置，你可能只能访问其中一个命令。因此，最好先删除旧工具。你可以使用以下命令完成：

1
2

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

然后安装新的 CLI 工具：

1

$ npm install --global foundation-cli

你可以在 Foundation 的文档中阅读更多关于安装的信息。

如果你不想在系统上安装 foundation-cli，并且过去已经安装过 Gulp 和 Bower，你可以简单地克隆包含 Foundation 模板的代码仓库，然后使用 gulp 和 npm 命令代替 foundation 命令。所有操作的工作方式应该与使用 foundation-cli 时相同。

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

安装好 foundation-cli 后，你可以通过运行以下命令开始使用它：

1

$ foundation new --framework sites --template zurb

如你所见，我们使用 foundation 作为命令名，而不是 foundation-cli。另外，我们只会看看 Foundation for Sites 的 zurb 高级模板。我们需要使用 --framework 标志选择正确的框架，并使用 --template 标志选择正确的模板。你也可以选择基础模板，但我认为如果你想要仔细研究的话，高级模板要好得多。

安装完成后，你应该会有一个在安装过程中你提供的项目文件夹。同时，所有的依赖项也应该安装在那里。你现在需要做的就是 cd 进入新创建的项目文件夹，然后在该文件夹内运行：

1

$ foundation watch

魔法来了！这个命令会运行 Gulp 构建和服务器任务以及 watch 命令。这意味着它会触发所有已配置的 Gulp 任务，你可以在代码中看到这些任务。所以，当你运行这个命令时，你应该会在控制台中看到一些信息。目前最重要的是：

1
2
3
4
5
6
7
8

------------------------------------
  Local: http://localhost:8000
  External: [... your external IP here ...]
-----------------------------------------------
  UI: http://localhost:3001
  UI External: [... your external IP here ...]
-----------------------------------------------
 [BS] Serving files from: dist

这里有你正在运行的服务器信息。第一个是你的实际应用程序，你还有一个用于 BrowserSync 测试的 UI 服务器（我们稍后会讨论）。你可以看到你的应用文件是从 dist 目录提供的，你可以在浏览器中访问 http://localhost:8000 并看到标准的 Foundation 6 启动模板。

查看内部结构

我认为这是最令人兴奋的部分，但在此之前我们必须完成整个安装过程。

文件夹结构，Gulpfile.js，JavaScript/CSS 资源

让我们看看新创建项目的文件夹结构。最重要的文件夹是 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 和 Handlebars 模板

Panini 是 Foundation 团队构建的一个出色且简单的工具。使用 Panini，你可以创建具有一致布局和可重用部分（partials）的页面。

在你的 dist 文件夹中，有随时可用的静态 HTML 文件。当然，如果你只有一个文件，一切都很简单。当你想创建多个具有几个相同部分的 HTML 文件时，问题可能会出现。它可能是一个页脚、侧边栏、页头或许多其他被称为部分（partials）的元素。

如果没有 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，看起来像：

1
2
3

---
layout: my-custom-layout
---

这些标记应放在页面文件内容的顶部。这仅适用于将使用此布局的页面，其他所有页面将使用默认布局。

让我们看看 pages 文件夹。在这个文件夹中，你会发现 index.html 文件，这是一个内容演示页面。如你所见，它没有任何 html 或 body 标签。这是因为它只是将被注入到前面讨论的 default.html 布局中的内容。

你当然可以添加类似的页面，但有些可能使用不同的布局。

如果你想要一些小的、可重用的 HTML 元素，你可以在 partials 文件夹中创建它们。在我们创建的演示项目中没有这样的文件，但这真的很简单。只需创建一个包含 HTML 片段的文件，并随意命名此文件。然后，在你的布局文件或页面文件中，你可以通过类似 {{> my-partial-file}} 的方式引入这个部分（partial）（注意没有文件扩展名）。就这样。所有内容将被连接、编译并复制到 dist 文件夹中。

还有一个名为 data 的文件夹。在这里，你可以提供一些 .json 或 .yml 格式的数据。例如，假设我在 data 文件夹中有一个 myList.json 文件，内容如下：

1
2
3

{
  items: ["item 1", "item 2", "item 3"]
}

在布局页面或部分（partial）HTML 文件中，我可以使用类似这样的代码：

1
2
3
4
5

<ul>
  {{#each myList.items}}
    <li class="item-name">{{this}}</li>
  {{/each}}
</ul>

这让你可以遍历 JSON 数据并生成一些 HTML。我们应该得到的是一个项目列表，名称来自数组。

如你所见，当你想创建复杂的 HTML 结构并且不想重复自己时，Panini 是一个非常实用的工具。

BrowserSync：同步浏览器测试和实时重载

我要讨论的 Foundation CLI 工具的最后一个预配置特性是 BrowserSync。你可能知道，前端工作很困难，因为你需要在许多设备和许多分辨率上测试你的网站。现在想象一下，你有一张大桌子，上面有许多连接到你的网站的不同设备。当你点击某物或滚动页面时，所有设备都会做同样的事情。这很棒，因为你可以实时看到哪些需要修正，哪些工作不好。

我们创建的项目会自动提供你的外部 IP 地址（见上文）。你可以把它复制并粘贴到所有不同设备的浏览器中，连接到同一个 BrowserSync 引擎并开始测试。

BrowserSync 还提供实时更改，因此，如果你保存了某些内容，它将在浏览器窗口中显示，而无需手动刷新页面。它也会出现在所有连接的设备上，并且通过 foundation-cli 和 zurb 模板，你免费获得了所有这些功能，无需任何额外工作。这有多棒？

结语

我个人认为 Zurb Foundation 团队做得非常好，为开发者提供了出色的工具和脚手架。这也至关重要。不仅仅是现成可用的插件和 CSS 样式。使用 Foundation for Sites 6 是一种很好的体验。想象一下，在不编程后端的情况下，你可以使用 Foundation CLI 工具完成多少工作。你可以创建静态网站和博客，它们也可以相当高级。更不用说在许多情况下，静态博客和网站甚至更快更好。

还有一件事 —— 我没有提到压缩的 CSS 和 JavaScript 文件。如果你使用 foundation watch 命令，你将在 dist 文件夹中获得 CSS 和 JavaScript 文件，但它们不会被压缩。如果你希望该文件夹中有准备就绪的生产文件，只需运行 foundation build。如果你想了解更多关于 foundation 命令的信息，只需运行 foundation help 命令。当需要更新项目中的依赖项时，你可以运行 foundation update。

总而言之，我希望你在这里学到了一些东西。如果你有问题，请在评论中告诉我，或者查看我的个人资料以了解与我联系的不同方式。

关于 Foundation 6 CLI 工具的常见问题（FAQ）

使用 Foundation 6 CLI 工具的先决条件是什么？ 要使用 Foundation 6 的 CLI 工具，你需要在系统上安装 Node.js（0.12 或更高版本）和 Git。Node.js 是运行命令行界面所需的 JavaScript 运行时。Git 是一个版本控制系统，用于在软件开发期间跟踪源代码的更改。如果你没有安装这些，你可以从官方网站下载 Node.js，从 Git 官网下载 Git。安装这些后，你就可以开始使用 Foundation 6 的 CLI 工具了。

如何安装 Foundation 6 的 CLI 工具？ 安装 Foundation 6 的 CLI 工具很简单。打开你的终端或命令提示符，输入以下命令：npm install foundation-cli --global。此命令告诉 npm（Node 包管理器）下载 Foundation CLI 并全局安装它，以便可以在计算机上的任何目录中使用。安装完成后，你可以通过在终端中输入 foundation -v 来验证。这应该显示你系统上安装的 Foundation CLI 版本。

如何使用 Foundation 6 的 CLI 工具创建新项目？ 要使用 Foundation 6 的 CLI 工具创建新项目，请打开终端并导航到你想要创建项目的目录。然后，输入以下命令：foundation new。这将提示你为项目选择模板。你可以从基础模板、高级模板或自定义模板中选择。选择模板后，CLI 将创建一个包含你项目文件的新目录，并安装所有必要的依赖项。

Foundation 6 的 CLI 工具中有哪些不同的命令可用？ Foundation 6 的 CLI 工具提供了几个命令来帮助你管理项目。一些最常用的命令包括：foundation new（创建新项目）、foundation watch（启动服务器并监视文件更改）、foundation build（将文件编译为可投入生产的项目）和 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 从你的系统中移除全局包 foundation-cli。

我可以在多个项目上使用 Foundation 6 的 CLI 工具吗？ 是的，你可以在多个项目上使用 Foundation 6 的 CLI 工具。CLI 是全局安装在你的系统上的，这意味着你可以在任何目录中使用它。要创建新项目，只需导航到所需目录并使用 foundation new 命令。

Foundation 6 的 CLI 工具中基础模板和高级模板有什么区别？ Foundation 6 的 CLI 工具中的基础模板为项目提供了一个简单的起点，所需设置最少。而高级模板则包含了用于更复杂项目的额外工具和配置。这些包括 Sass 编译器、自动前缀添加器、JavaScript 连接器和源映射生成器。

如何使用 Foundation 6 的 CLI 工具编译用于生产的项目？ 要编译用于生产的项目，你可以使用 foundation build 命令。此命令编译你的 Sass 和 JavaScript 文件，压缩 CSS 和 JavaScript，压缩图像，并将 HTML 文件复制到 dist（distribution 的缩写）文件夹中。该文件夹包含了你项目所有准备就绪的生产文件。

如何解决 Foundation 6 的 CLI 工具遇到的问题？ 如果在使用 Foundation 6 的 CLI 工具时遇到问题，你可以采取几个步骤进行故障排除。首先，确保你的系统上安装了最新版本的 Node.js 和 Git。如果问题仍然存在，请尝试使用 npm update 命令更新 CLI。如果你仍然遇到问题，可以在 Foundation 的官方论坛或 GitHub 页面上寻求帮助。