ar foundation_Foundation 6的CLI工具入门

ar foundation

The recently released Foundation 6 gives you many ways and tools to use it. You can download the static files, or you can use Yeti Launch, a special desktop app for Mac (soon there will be a Windows version).

最近发布的Foundation 6为您提供了许多使用它的方法和工具。 您可以下载静态文件，也可以使用Mac专用的桌面应用Yeti Launch (很快就会有Windows版本)。

A lesser-known feature is a set of command line tools available with Foundation 6, and that’s what I will cover in this article. Foundation 6 is a really flexible front-end framework, which, besides many obvious CSS features and JavaScript plugins, also has great developer tools.

一个鲜为人知的功能是Foundation 6附带的一组命令行工具 ，这就是我将在本文中介绍的内容。 Foundation 6是一个非常灵活的前端框架，除了许多明显CSS功能和JavaScript插件外，它还具有出色的开发人员工具。

我何时可以使用Foundation的CLI工具？ (When Might I Want to Use Foundation’s CLI Tools?)

You’re probably asking why you should bother with CLI tools when you have access to the static JavaScript and CSS files, which works just fine. You probably need standard structures and an easy-to-use workflow, and that’s ok.

您可能会问，在访问静态JavaScript和CSS文件时，为什么要打扰CLI工具，效果很好。 您可能需要标准结构和易于使用的工作流程，这没关系。

I’m sure you can achieve your goals that way, but I know that there are many developers who want to gain more control over the build process. This would include SCSS compilation, concatenation, minification, image optimization, and templates. I prefer to have access to these extra tools. And so there are use cases where CLI tools might be a better option.

我确定您可以通过这种方式实现目标，但是我知道有许多开发人员希望获得对构建过程的更多控制。 这将包括SCSS编译，连接，缩小，图像优化和模板。 我更喜欢使用这些额外的工具。 因此，在某些情况下，CLI工具可能是一个更好的选择。

If you work regularly with the command line but don’t know exactly what Foundation 6 has to offer in this area, or you don’t work with the command line and maybe want to learn something new, then this article is for you.

如果您经常使用命令行工作，但不完全了解Foundation 6在此领域中提供的功能，或者您不使用命令行，并且可能想学习新知识，那么本文适合您。

启动并运行 (Up and Running)

To get started there are some prerequisites. You’ll need to have NodeJS installed and also the npm tool that should be installed with NodeJS. You also need Git, Gulp, and Bower, all of which our foundation-cli will use. You can install these by running the following command:

要开始使用，需要满足一些先决条件。 你需要有的NodeJS安装，也是故宫的工具，应该可以的NodeJS安装。 您还需要Git ， Gulp和Bower ，我们的foundation-cli都将使用它们。 您可以通过运行以下命令来安装它们：

$ npm install --global gulp bower

On some systems you’ll need super user access, especially when installing something with npm globally, so you might need to use sudo before the commands described in this post.

在某些系统上，您将需要超级用户访问权限，尤其是在全局安装npm的情况下，因此您可能需要在本文中所述的命令之前使用sudo 。

安装foundation-cli (Installing foundation-cli)

If you already have the Foundation 5 CLI on your machine, you’ll only be able to access one of the commands, depending on how your command line environment is configured. So it’s better to remove the old tools first. You can do this with the following commands:

如果您的计算机上已经安装了Foundation 5 CLI，则只能访问其中一个命令，具体取决于命令行环境的配置方式。 因此最好先删除旧工具。 您可以使用以下命令执行此操作：

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

Then install the new CLI tools:

然后安装新的CLI工具：

$ npm install --global foundation-cli

You can read more about the installation in Foundation’s documentation.

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

If you don’t want to install foundation-cli on your system and you have installed Gulp and Bower in the past, you can simply clone the repository with the Foundation template and then instead of using the foundation command, you can use the gulp and npm commands. Everything should work the same way as when using foundation-cli.

如果你不想安装foundation-cli在系统上和您在过去安装杯和鲍尔，你可以简单地用克隆库基金会的模板 ，然后，而不是使用foundation命令，你可以用gulp和npm命令。 一切都应与使用foundation-cli时相同。

Foundation CLI给我什么？ (What Does Foundation CLI Give Me?)

As mentioned, Foundation CLI uses Gulp and Bower under the hood. What are Gulp and Bower? Gulp is a toolkit that will help you automate painful or time-consuming tasks in your development workflow. Here, we can think of SCSS compilation, minification, concatenation, but also image compression or other useful tasks. Bower is a package manager for the web, which lets you download and install front-end libraries via the command line. For example, installing jQuery is a one line command: bower install jquery.

如前所述，Foundation CLI在后台使用Gulp和Bower。 什么是Gulp和Bower？ Gulp是一个工具包，可帮助您自动执行开发工作流程中繁琐或耗时的任务。 在这里，我们可以想到SCSS的编译，最小化，串联以及图像压缩或其他有用的任务。 Bower是Web的软件包管理器，它使您可以通过命令行下载和安装前端库。 例如，安装jQuery是单行命令： bower install jquery 。

Foundation CLI downloads and installs blank templates for any of the three Foundation frameworks: Sites, Apps, and Emails. All of these templates are ready to work with Gulp and Bower, with preconfigured Gulp tasks and Bower installation sources. This is similar to a tool like Yeoman.

Foundation CLI为三种Foundation框架(网站，应用程序和电子邮件)中的任何一个下载并安装空白模板。 所有这些模板都可以与Gulp和Bower一起使用，并带有预先配置的Gulp任务和Bower安装源。 这类似于类似Yeoman的工具。

使用Foundation CLI (Using Foundation CLI)

When you’ve installed foundation-cli, you can start using it by running:

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

$ foundation new --framework sites --template zurb

As you can see, we use foundation as the name and not foundation-cli. Also, we’ll only take a look at the Foundation for Sites zurb advanced template. We need to use the --framework flag to choose the proper framework and also the --template flag to choose the proper template. You can also choose the basic template, but I think the advanced is much better if you want to take a closer look.

如您所见，我们使用foundation作为名称，而不是foundation-cli 。 另外，我们将仅查看zurb Foundation for zurb高级模板。 我们需要使用--framework标志来选择合适的框架，还需要使用--template标志来选择合适的模板。 您也可以选择basic模板，但是如果您想仔细看一下，我认为高级版要好得多。

After the installation, you should have a project folder with the name you’ve provided during the installation. Also, all dependencies should be installed there. All you need to do now is cd into the newly created project and inside the folder you can run:

安装后，您应该有一个项目文件夹，其名称与安装过程中提供的名称相同。 另外，所有依赖项都应安装在此处。 现在您需要做的就是将cd放入新创建的项目中，然后在该文件夹中运行：

$ foundation watch

Here comes the magic! What this does is run the Gulp build and server tasks and also the watch command. This means it triggers all configured Gulp tasks, which you will be able to see in the code. So when you run this command you should see some information in the console. The most important for now are:

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

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

Here you have information about your running servers. The first is your actual application, and you also have a UI server for BrowserSync testing (we’ll talk about that shortly). You can see that your app files are served from the dist directory and you can visit http://localhost:8000 in your browser and see the standard Foundation 6 starter template.

在这里，您可以获得有关正在运行的服务器的信息。 首先是您的实际应用程序，并且您还具有用于BrowserSync测试的UI服务器(我们将在稍后讨论)。 您可以看到您的应用程序文件是从dist目录提供的，您可以在浏览器中访问http://localhost:8000并查看标准的Foundation 6入门模板。

看看里面有什么 (Taking a Look at What’s Inside)

I think this is the most exciting part, but we had to go through all the installation process before getting to this point.

我认为这是最令人兴奋的部分，但是在达到这一点之前，我们必须完成所有安装过程。

文件夹结构，Gulpfile.js，JavaScript / CSS资产 (Folder structure, Gulpfile.js, JavaScript/CSS Assets)

Let’s take a look at the folder structure of the newly created project. The most important folders are src and dist. Your development work will be done mostly in the src folder and all your production files will be prepared in the dist folder. The server that you run serves files from that folder as well. This means that you can prepare your workspace as you want, but in the end, production ready files will land in the dist folder and this is what you want to serve as your finished product.

让我们看一下新创建的项目的文件夹结构。 最重要的文件夹是src和dist 。 您的开发工作将主要在src文件夹中完成，所有生产文件将在dist文件夹中准备。 您运行的服务器也从该文件夹提供文件。 这意味着您可以根据需要准备工作区，但是最后，生产就绪文件将位于dist文件夹中，这就是您要用作成品的文件。

So, how is this possible? Let’s take a look at our most important file here – gulpfile.js. If you aren’t familiar with Gulp, you might want to check out this introductory tutorial. Gulp isn’t as scary as it looks in the beginning, but it’s important because this is the place where all the magic happens.

那么，这怎么可能呢？ 让我们在这里看看我们最重要的文件gulpfile.js 。 如果您不熟悉Gulp，则可能需要查看此入门教程 。 Gulp并不像开始时那样令人恐惧，但它很重要，因为这是发生所有魔术的地方。

Gulp is based on many Gulp plugins that add additional functionality via simple npm packages. In this new Foundation project they are defined in package.json. They are also downloaded and installed automatically when running foundation new (as above), so you don’t need to worry about that.

Gulp基于许多Gulp插件，这些插件通过简单的npm软件包添加了附加功能。 在这个新的Foundation项目中，它们在package.json中定义。 运行foundation new (如上所述)时，它们也会自动下载并安装，因此您不必为此担心。

When you open the Gulp file, you can see that every task such as clean, copy, sass, and JavaScript is defined similarly using the special Gulp plugin that is responsible for this particular part of the job. Additionally, as you can see at the bottom of the file, there are main tasks like ‘build’ or ‘default’ which aggregate others. Foundation boilerplate is configured, so you basically don’t need to do anything. Of course you can adjust it as you’d like.

当您打开Gulp文件时，您会看到，使用负责该工作这一特定部分的特殊Gulp插件，类似地定义了每个任务(如清理，复制，sass和JavaScript)。 此外，如您在文件底部所看到的，还有一些主要任务(例如“ build”或“ default”)会聚合其他任务。 基础样板已配置，因此您基本上不需要执行任何操作。 当然，您可以根据需要进行调整。

With this kind of config, you can write your scss in the src/assets/scss folder, and you can write your JavaScript files in the src/assets/js folder. You can also place your images in the src/assets/img folder. When you run foundation watch or foundation build, all those files will be copied to the dist folder. Depending on the options, they can be compressed or images can be optimized. This is all configured in the gulpfile.js.

通过这种配置，您可以在src/assets/scss文件夹中编写src/assets/scss ，并且可以在src/assets/js文件夹中编写JavaScript文件。 您也可以将图像放置在src/assets/img文件夹中。 当您运行foundation watch或foundation build ，所有这些文件都将被复制到dist文件夹。 根据选项的不同，可以对其进行压缩或优化图像。 所有这些都在gulpfile.js配置。

Gulp configuration and its plugins are a topic for another article. Let’s now take a look at the .html files and create advanced layouts and relations with Panini.

Gulp配置及其插件是另一篇文章的主题。 现在让我们看一下.html文件，并使用Panini创建高级布局和关系。

Panini和车把模板 (Panini and Handlebars Templates)

Panini is an awesome and simple tool built by the Foundation team. With Panini, you can create pages with consistent layouts and reusable partials.

Panini是由基金会团队构建的出色且简单的工具。 使用Panini，您可以创建具有一致布局和可重用部分的页面。

In your dist folder, you have ready-to-use static HTML files. Of course, if you have just one file, everything is really simple. Problems might occur when you want to create many HTML files that have a couple of identical parts. It could be a footer, sidebar, header or many other elements that are called partials.

在dist文件夹中，您有现成的静态HTML文件。 当然，如果只有一个文件，那么一切都非常简单。 当您要创建许多具有几个相同部分HTML文件时，可能会出现问题。 它可以是页脚，侧边栏，页眉或许多其他元素，称为partials 。

Without Panini, you would need to copy all that repeating code into each HTML file, and if a change is needed you’d have to either do it manually in each file, or do a find-and-replace in your text editor. With Panini, you can do this all in one place while editing and all files will be edited and copied into the dist folder.

如果没有Panini，则需要将所有重复的代码复制到每个HTML文件中，如果需要更改，则必须在每个文件中手动进行更改，或在文本编辑器中进行查找和替换。 使用Panini，您可以在编辑时在一处进行所有操作，所有文件都将被编辑并复制到dist文件夹中。

What is also important is that Panini is a built on the Handlebars templating library. It can compile Markdown in your HTML files as well. More info on Panini can be found in Foundation’s docs.

重要的是Panini是建立在Handlebars模板库的基础上的。 它也可以在您HTML文件中编译Markdown。 有关Panini的更多信息，请参见Foundation的文档 。

Let’s take a look at the Panini templates folder structure in the project. We need to open the src folder. Here we have data, layouts, pages, and partials. As you can expect, in the layouts folder, we can write our main layout scaffolds. Here we can define a header and footer that will be repeated on all pages.

让我们看一下项目中的Panini模板文件夹结构。 我们需要打开src文件夹。 这里我们有data ， layouts ， pages和partials 。 如您所料，我们可以在layouts文件夹中编写主布局脚手架。 在这里，我们可以定义将在所有页面上重复的页眉和页脚。

If you want to use only one layout, you can just name the file default.html. You will find a demo file like that in our project. If you want to use more than one layout, you can create more files with special body tags {{> body}} (see the default.html example) and you will need to use special markers in your pages to tell the compiler which layout a page should use. It is called Front Matter and looks like:

如果只想使用一种布局，则只需将文件命名为default.html 。 您将在我们的项目中找到类似的演示文件。 如果要使用多个布局，则可以使用特殊的正文标记{{> body}}创建更多文件(请参见default.html示例)，并且需要在页面中使用特殊标记来告诉编译器哪种布局页面应使用。 它称为“ 前事项” ，看起来像：

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

These markers should be placed at the top of a page file content. This is only for pages that will use this layout, all others will use the default one.

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

Let’s take a look at the pages folder. In this folder, you’ll find the index.html file, which is a content demo page. As you can see, it doesn’t have any html or body tag. This is because it is just the content that will be injected into the previously discussed default.html layout. You can of course add similar pages, but some might use different layouts.

让我们看一下pages文件夹。 在此文件夹中，您将找到index.html文件，这是一个内容演示页面。 如您所见，它没有任何html或body标签。 这是因为只是将内容注入到前面讨论的default.html布局中。 您当然可以添加类似的页面，但是有些页面可能使用不同的布局。

If you want some small, reusable HTML elements, you can create them in the partials folder. There aren’t any files in the demo project which we have created, but this is really simple. Just create a file with a fragment of HTML and name this file whatever you want. Then in your layout files or pages files, you can import this partial by including it using something like: {{> my-partial-file}} (notice there is no file extension). And that’s it. All will be connected, compiled, and copied into the dist folder.

如果需要一些小的可重用HTML元素，可以在partials文件夹中创建它们。 在我们创建的演示项目中没有任何文件，但这确实很简单。 只需创建带有HTML片段的文件，然后根据需要命名该文件。 然后，在布局文件或页面文件中，可以使用以下内容将其部分导入： {{> my-partial-file}} (注意，没有文件扩展名)。 就是这样。 所有这些都将被连接，编译并复制到dist文件夹中。

There is also a folder called data. Here you can provide some data in the format of .json or .yml files. So for example, let’s say I have a myList.json file in the data folder with the following content:

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

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

In the layout page or partial HTML files, I can use something like:

在布局页面或部分HTML文件中，我可以使用类似以下内容的内容：

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

This lets you iterate through the JSON data and produce some HTML. What we should get is a list of items with the names from the array.

这使您可以遍历JSON数据并生成一些HTML。 我们应该得到的是带有数组名称的项目列表。

As you can see, Panini is a really useful tool when you want to create complicated HTML structures and you don’t want to repeat yourself.

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

BrowserSync：同步浏览器测试和实时重新加载 (BrowserSync: Synchronised Browser Testing and Live Reload)

The last preconfigured feature of the Foundation CLI tool I’m discussing is BrowserSync. As you probably know, front-end work is hard because you need to test your website on many devices and many resolutions. Now imagine that you have a big table with many different devices connected to your website. When you click something or scroll the page, all devices will do the same. This is great because you see in real time what should be corrected and what doesn’t work well.

我正在讨论的Foundation CLI工具的最后一个预配置功能是BrowserSync 。 如您所知，前端工作很辛苦，因为您需要在多种设备和多种分辨率下测试您的网站。 现在，假设您有一张大桌子，上面有许多连接到您网站的设备。 当您单击某些内容或滚动页面时，所有设备都将执行相同的操作。 这很棒，因为您可以实时看到哪些问题应该纠正，哪些问题效果不好。

Our created project automatically provides your external IP address (see above). You can take it and paste it in all different device browsers to connect to the same BrowserSync engine and start testing.

我们创建的项目会自动提供您的外部IP地址(请参见上文)。 您可以将其粘贴到所有不同的设备浏览器中，以连接到相同的BrowserSync引擎并开始测试。

BrowserSync also provides live changes so, if you save something, it will appear in the browser window without manually refreshing the page. It will also appear on all connected devices and you get this all for free with the foundation-cli and zurb templates without any additional work. How awesome is that?

BrowserSync还提供实时更改，因此，如果您保存内容，它将显示在浏览器窗口中，而无需手动刷新页面。 它也将出现在所有连接的设备上，您无需使用任何额外的功夫就可以通过foundation-cli和zurb模板免费获得所有内容。 那有多棒？

最后的话 (Final Words)

I personally think that the Zurb Foundation team has done a very good job providing great tools and scaffolds for developers. This is what matters too. Not only some ready-to-use plugins and CSS styles. Working with Foundation for Sites 6 is a great experience. Just imagine how much work you can do with the Foundation CLI tools without programming the backend. You can create static websites and blogs and they could be quite advanced too. Not to mention that in many cases, static blogs and websites are even faster and better.

我个人认为，Zurb基金会团队做得很好，为开发人员提供了出色的工具和支架。 这也很重要。 不仅有一些现成的插件和CSS样式。 与Site for Sites 6一起工作是很棒的经历。 试想一下，无需对后端进行编程即可使用Foundation CLI工具进行多少工作。 您可以创建静态网站和博客，它们也可能非常高级。 更不用说在许多情况下，静态博客和网站甚至更快，更好。

I really encourage you to take a better look at Panini. You can also find some documentation on the npm package readme. It can do many awesome things that I haven’t described here, like Markdown compilation or custom helpers. You can read about Gulp and take a closer look at all Gulp tasks used in the zurb template/project generated by the foundation-cli tool as well.

我真的鼓励您更好地了解Panini。 您还可以在npm软件包自述文件中找到一些文档。 它可以完成许多我这里没有描述的很棒的事情，例如Markdown编译或自定义帮助器。 您可以阅读有关Gulp的信息，并仔细研究一下foundation-cli工具生成的zurb模板/项目中使用的所有Gulp任务。

One more thing – I didn’t mention compressed CSS and JavaScript files. If you’re using the foundation watch command, you’ll have CSS and JavaScript files in the dist folder but they will be uncompressed. If you want production-ready files in that folder, just run foundation build. If you want to read more about the foundation command, just run the foundation help command. When the time comes and you need to update your dependencies in the project, you can run foundation update.

还有一件事–我没有提到压缩CSS和JavaScript文件。 如果您使用foundation watch命令，则dist文件夹中将包含CSS和JavaScript文件，但是它们将被解压缩。 如果要在该文件夹中准备生产的文件，只需运行foundation build 。 如果您想了解有关foundation命令的更多信息，只需运行foundation help命令。 时间到了，您需要更新项目中的依赖关系时，可以运行foundation update 。

So all in all, I hope that you’ve learned something here. If you have questions, let me know in the comments or check out my profile for different ways to get in touch with me.

所以总的来说，我希望您在这里学到了一些东西。 如果您有任何疑问，请在评论中让我知道，或查看我的个人资料，以其他方式与我联系。

翻译自: https://www.sitepoint.com/getting-started-with-foundation-6s-cli-tools/

ar foundation