基金会 - 入门项目（Starter Projects）

您可以从项目开发开始，使用一些可通过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文件和图像不会受到此资产复制过程的影响，因为他们将拥有自己的复制内容的过程。

页面编译

您可以在三个文件夹下创建HTML页面，即位于src/目录中的pages ， layouts和partials 。 您可以使用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文件夹下的assets/img文件夹下。 您可以使用支持JPEG，PNG，SVG和GIF文件gulp-imagemin在构建生产时压缩图像。

BrowserSync (BrowserSync)

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