📜  Foundation-入门项目

📅  最后修改于: 2020-10-25 05:49:32             🧑  作者: Mango


 

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

Foundation模板

Foundation模板类似于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 LaunchFoundation CLI使用ZURB模板-

$ foundation new --framework sites --template zurb

要运行此模板,请遵循基本模板中指定的相同步骤。您也可以从Github下载模板文件。

资产复制

您可以使用Gulp复制src / assets文件夹中的内容,其中资产将成为您的项目文件夹。这里重要的是,SASS文件,JavaScript文件和图像将不在此资产复制过程中,因为它们将具有自己的复制内容的过程。

页面编译

您可以在src /目录中的三个文件夹(即pageslayoutspartials)下创建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查看编译的模板。服务器运行时,保存文件时页面会自动刷新,并且您可以在工作时实时看到对该页面所做的更改。