Foundation教程

Foundation 启动项目

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

基本模板

基本模板类似于 SASS 模板,它包括平面目录结构并且只编译 SASS 文件,并且在只使用 SASS 的情况下拥有这个简单的模板是很好的。您可以通过使用 Yeti Launch 或使用 Foundation CLI 使用以下命令来使用基本模板-
$ foundation new --framework sites--template basic
要进行设置,首先运行 npm installbower 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 文件和图像不会在此资产复制过程中,因为它们将有自己的过程来复制内容。

页面编译

您可以在 pageslayoutspartials 这三个文件夹下创建 HTML 页面,它们位于 src/ 中> 目录。您可以使用 Panini 平面文件编译器为页面通过使用模板、页面、HTML 部分。这个过程可以通过使用 Handlebars 模板语言来完成。

SASS 编译

您可以使用 Libsass 将 SASS 编译为 CSS,主要的 SASS 文件将存储在 src/assets/scss/app.scss 下,并且新创建的 SASS 部分也将存储在此文件夹下。 CSS 的输出将像普通 CSS 一样,采用嵌套样式。您可以使用 clean-css 压缩 CSS 并删除未使用的 CSS从样式表使用 UnCSS。

JavaScript 编译

JavaScript 文件将与 Foundation 一起存储在 src/assets/js 文件夹下,所有依赖项都绑定到 app.js 文件中。文件将按照以下顺序捆绑在一起-
对Foundation的依赖。 文件将存储在 src/assets/js 文件夹下。 这些文件被捆绑到一个名为 app.js 的文件中。

图像压缩

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

浏览器同步

您可以创建一个 BrowserSync 服务器,该服务器可在 进行同步浏览器测试http://localhost:8000 并且能够看到使用这个 URL 编译的模板。当您的服务器运行时,页面会在您保存文件时自动刷新,您可以在工作时实时查看对页面所做的更改。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4