初级使用

一个复杂一点的例子

为了尝试更多 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 来安装。

  1. npm install -g 插件名

譬如：

  1. npm install -g fis-parser-less
  2. npm install -g fis3-postpackager-loader

预处理

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

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

  1. fis.match('*.less', {
  2.   // fis-parser-less 插件进行解析
  3.   parser: fis.plugin('less'),
  4.   // .less 文件后缀构建后被改成 .css 文件
  5.   rExt: '.css'
  6. })
如同之前强调的，虽然构建后后缀为 .css。但在使用 FIS3 时，开发者只需要关心源码路径。所以引入一个 less 文件时，依然是 .less 后缀。 
  1. <link rel="stylesheet" type="text/css" href="./test.less">

简单合并

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




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

  • 基于整个项目打包

    1. fis.match('::package', {
    2.   postpackager: fis.plugin('loader')
    3. });
    5. fis.match('*.less', {
    6.   parser: fis.plugin('less'),
    7.   rExt: '.css'
    8. });
    10. fis.match('*.{less,css}', {
    11.   packTo: '/static/aio.css'
    12. });
    14. fis.match('*.js', {
    15.   packTo: '/static/aio.js'
    16. });

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

  • 基于页面的打包方式

    1. fis.match('::package', {
    2.   postpackager: fis.plugin('loader', {
    3.     allInOne: true
    4.   })
    5. });
    7. fis.match('*.less', {
    8.   parser: fis.plugin('less'),
    9.   rExt: '.css'
    10. });

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

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

构建调试预览

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

  1. fis3 release

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

  1. fis3 server start --type node