基金会 - 入门项目
您可以使用一些可用的模板开始项目开发，这些模板可以通过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文件夹中的内容，其中asset将是您的项目文件夹。这里重要的是，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文件中。这些文件将按照以下顺序捆绑在一起 -
- 基金会的依赖性。
- 文件将存储在src/assets/js文件夹下。
- 这些文件被捆绑到一个名为app.js的文件中。
图像压缩
默认情况下，所有图像都将存储在dist文件夹下的asset/img文件夹下。您可以在构建生产时使用支持 JPEG、PNG、SVG 和 GIF 文件的gulp-imagemin压缩图像。
浏览器同步
您可以创建一个BrowserSync服务器，它可以在http://localhost:8000上同步浏览器测试，并且能够使用此 URL 查看编译后的模板。当您的服务器运行时，页面会在您保存文件时自动刷新，并且您可以在工作时实时看到对页面所做的更改。