Fis 打包工具

  • Fis 的组成:

    工具:提供了命令行,在 node 的基础上做了优化
    插件:一些 npm 包,实现了对插件的安装

  • Fis 旨在解决:

    1. 代码模块化:提供了模块化插件

    2. 性能优化: 提供了压缩,合并,打包,缓存插件

    3. 自动化: 基于文件的流水线工作模式 (校验,编译,打包,发布),只需配置,即可完成

    4. 代码规范: 插件处理需要对代码进行相应的标记

  • Fis工作原理:

    1. 读取项目目录下的所有文件

    2. 读取配置文件,根据 match 规则,构建 File 对象

    3. 编译 File ,使用配置的插件处理文件内容

    4. 打包产出

  • Fis 的覆盖规则:

    同名属性覆盖,不同名属性追加

  • Fis 的处理流程(基于文件的流水线工作模式)

Fis 打包工具

1.Parser插件
Fis-parser-less-2.x:支持less编译成css
Fis-parser-node-sass:支持sass/scss编译成css

Fis 打包工具

2.Preprocessor插件
自动给 css 属性添加前缀,让标准的 css3 支持更多的浏览器

Fis 打包工具

3.optimizer插件

压缩js文件,Css文件,Png图片

Fis 打包工具

4.package插件 打包到指定目录
静态资源前端加载器,纯前端项目必备插件。自动加载页面中用到的资源,同时还能按页面级别的All In One 打包。此插件会收集所有的资源,如果希望某个资源不被收集,请在资源结尾处如 后面加上 注释

Fis 打包工具

Fis 打包工具

Fis 打包工具

5.hook插件

fis3 已经默认不自带模块化开发支持,如果需要采用 commonjs 规范作为模块化开发,使用该插件

注意:需要对目标文件设置 isMod 属性,说明这些文件是模块化代码。

Fis 打包工具

6.Deploy插件

Fis3-deploy-http-push 将产出文件通过http post到目标服务器

Fis 打包工具