您可以使用一些可用的模板开始您的项目开发，这些模板可以通过Yeti Launch或Foundation CLI安装。您可以使用Gulp构建系统使用这些模板来开始新项目，以处理Sass，JavaScript，复制文件等。

Foundation模板

Foundation模板类似于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文件夹中的内容，其中资产将成为您的项目文件夹。这里重要的是，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文件夹下的assets / img文件夹下。您可以在使用gulp-imagemin构建生产版本时压缩图像，该图像支持JPEG，PNG，SVG和GIF文件。

浏览器同步

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