Foundation - 入门项目
您可以使用一些可用模板开始项目开发，这些模板可以通过 Yeti Launch 或 Foundation CLI 安装。您可以使用这些模板开始新项目，使用 Gulp 构建系统来处理 Sass、JavaScript、复制文件等。
基本模板
基本模板类似于 SASS 模板，它包含平面目录结构并且仅编译 SASS 文件，在仅使用 SASS 时拥有这个简单模板是很好的。您可以使用 Yeti Launch 或 Foundation CLI 使用以下命令来使用基本模板 −
$ foundation new --framework sites --template basic
要进行设置，首先运行 npm install、bower install 并使用 npm start 命令运行它。您也可以从 Github 下载模板文件。
ZURB 模板
它是 CSS/SCSS、JavaScript、Handlebars 模板、标记结构、图像压缩的组合，并使用 SASS 处理。您可以使用 Yeti Launch 或 Foundation CLI 使用 ZURB 模板，命令如下 −
$ foundation new --framework sites --template zurb
要运行此模板，请按照基本模板中指定的相同步骤操作。您也可以从 Github 下载模板文件。
资产复制
您可以使用 Gulp 复制 src/assets 文件夹中的内容，其中 assets 将是您的项目文件夹。这里重要的是，SASS 文件、JavaScript 文件和图像不会进入此资产复制过程，因为它们将有自己的复制内容的过程。
页面编译
您可以在 src/ 目录中的三个文件夹(即 pages、layouts 和 partials)下创建 HTML 页面。您可以使用 Panini 平面文件编译器，该编译器使用模板、页面、HTML 部分为页面创建布局。此过程可以通过使用 Handlebars 模板语言来完成。
SASS 编译
您可以使用 Libsass 将 SASS 编译为 CSS，主 SASS 文件将存储在 src/assets/scss/app.scss 下，新创建的 SASS 部分也将存储在此文件夹下。CSS 的输出将与普通 CSS 一样，采用嵌套样式。您可以使用 clean-css 压缩 CSS，并使用 UnCSS 从样式表中删除未使用的 CSS。
JavaScript 编译
JavaScript 文件将与 Foundation 一起存储在 src/assets/js 文件夹下，所有依赖项都绑定到 app.js 文件中。这些文件将按照以下顺序捆绑在一起 −
- Foundation 的依赖项。
- 文件将存储在 src/assets/js 文件夹下。
- 这些文件捆绑到一个名为 app.js 的文件中。
图像压缩
默认情况下，所有图像都将存储在 dist 文件夹下的 assets/img 文件夹下。您可以在构建生产环境时使用支持 JPEG、PNG、SVG 和 GIF 文件的 gulp-imagemin 压缩图像。
BrowserSync
您可以创建一个 BrowserSync 服务器，该服务器可同步浏览器测试，网址为 http://localhost:8000，并可以使用此 URL 查看已编译的模板。在服务器运行时，保存文件时页面会自动刷新，您可以在工作时实时查看对页面所做的更改。
