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 文件将存储在 src/assets/js 文件夹中，Foundation 的所有依赖项都捆绑到 app.js 文件中。文件将按照以下顺序捆绑在一起：

• Foundation 的依赖项。
• 文件将存储在 src/assets/js 文件夹中。
• 这些文件捆绑成一个名为 app.js 的文件。

图像压缩

默认情况下，所有图像都将存储在 dist 文件夹下的 assets/img 文件夹中。您可以使用 gulp-imagemin 在构建用于生产时压缩图像，它支持 JPEG、PNG、SVG 和 GIF 文件。

BrowserSync

您可以创建一个 BrowserSync 服务器，该服务器在 https://127.0.0.1:8000 提供同步浏览器测试，并能够使用此 URL 查看已编译的模板。当您的服务器运行时，保存文件时页面会自动刷新，您可以在工作时实时看到对页面的更改。