Skip to content

Latest commit

 

History

History
117 lines (83 loc) · 3.46 KB

lv1.md

File metadata and controls

117 lines (83 loc) · 3.46 KB

初级使用

一个复杂一点的例子

为了尝试更多 FIS3 提供的特性,我们设计一个比较复杂的例子。这个例子包含

  • 两个页面
  • 三个 css 文件,其中俩页面各一个 css 文件,剩下一个 css 文件共用
  • 包含一个 less 文件,并被俩页面同时使用
  • 两个 png 图片
  • 两个 js 文件

例子下载地址 demo-lv1

安装一些插件

FIS3 是一个扩展性很强的构建工具,社区也包含很多 FIS3 的插件。为了展示 FIS3 的预处理、静态合并 js、css 能力,需要安装两个插件。

  • fis-parser-less:例子引入一个 less 文件,需要 less 预处理插件
  • fis3-postpackager-loader:可对页面散列文件进行合并

FIS3 的插件都是以 NPM 包形式存在的,所以安装 FIS3 的插件需要使用 npm 来安装。

npm install -g 插件名

譬如:

npm install -g fis-parser-less
npm install -g fis3-postpackager-loader

预处理

FIS3 提供强大的预处理能力,可以对 less、sass 等异构语言进行预处理,还可以对模板语言进行预编译。FIS3 社区已经提供了绝大多数需要预处理的异构语言。

我们给定的例子中有个 less 文件,那么需要对 less 进行预处理,我们已经安装了对应的预处理插件。现在只需要配置启用这个插件就能搞定这个事情。

fis.match('*.less', {
  // fis-parser-less 插件进行解析
  parser: fis.plugin('less'),
  // .less 文件后缀构建后被改成 .css 文件
  rExt: '.css'
})

如同之前强调的,虽然构建后后缀为 .css。但在使用 FIS3 时,开发者只需要关心源码路径。所以引入一个 less 文件时,依然是 .less 后缀。

<link rel="stylesheet" type="text/css" href="./test.less">

简单合并

在起步中我们阐述了图片合并 CssSprite,为了减少请求。现在介绍一种比较简单的打包 js、css 的方式。

启用打包后处理插件进行合并:

  • 基于整个项目打包

    fis.match('::package', {
      postpackager: fis.plugin('loader')
    });
    
    fis.match('*.less', {
      parser: fis.plugin('less'),
      rExt: '.css'
    });
    
    fis.match('*.{less,css}', {
      packTo: '/static/aio.css'
    });
    
    fis.match('*.js', {
      packTo: '/static/aio.js'
    });

    这样配置打包的结果是:一个页面最终只会引入一个 css、js:aio.js 和 aio.css。 但两个页面的资源都被打包到同一个包里面了。这个可能不是我们想要的结果,我们想一个页面只包含这个页面用过的资源。

  • 基于页面的打包方式

    fis.match('::package', {
      postpackager: fis.plugin('loader', {
        allInOne: true
      })
    });
    
    fis.match('*.less', {
      parser: fis.plugin('less'),
      rExt: '.css'
    });

    loader 插件配置 allInOne 属性,即可对散列的引用链接进行合并,而不需要进行配置 packTo 指定合并包名。

注意,这个插件只针对纯前端的页面进行比较粗暴的合并,如果使用了后端模板,一般都需要从整站出发配置合并。

构建调试预览

进入 demo 目录,执行命令,构建即发布到本地测试服务根目录下:

fis3 release

启动内置服务器进行预览;

fis3 server start --type node