目录

基金会 - 入门项目( Starter Projects)

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

页面编译

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

↑回到顶部↑
WIKI教程 @2018