前端工程构建工具FIS3

时间：2021-09-26 06:53:04

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。

一、安装

  1. 全局安装fis3 
    npm install -g fis3 
  2. 查看是否安装成功 
    fis3 -v

    前端工程构建工具FIS3

二、构建

官网提供了一个简单例子，例子结构如下（非常简单的由html、css、js以及几张图片构成）

fis-conf.js是FIS3 配置文件，它所在的目录为项目根目录

前端工程构建工具FIS3

  1. 构建发布（目前fis-conf.js为空）

    • 构建发布到指定路径
    • fis3 release -d <path>

      如发布到根目录的output目录下

      fis3 release -d ./output

      前端工程构建工具FIS3

    • 对比 构建前 和 构建后 的html和css文件，会发现资源由原来的 相对定位 变成了 绝对定位，这就是FIS3的资源定位。

      • 好处有：① 资源发布到任何静态资源服务器任何路径上，线上运行时都能找到它们； ② 代码可移植性强，移植不用担心线上部署不一致的问题

前端工程构建工具FIS3   前端工程构建工具FIS3

三、配置文件

1、fis.match(selector, props)

    • selector：要匹配的文件路径
    • props：编译规则属性
fis.match('*.{png,js,css}', {

  release: '/static/$0'

});

2、fis.media() 配置状态

fis.media() 可以使配置文件变为多份（多个状态，一个状态一份配置）。例如：

fis.media('rd').match('*', {

  deploy: fis.plugin('http-push', {

    receiver: 'http://remote-rd-host/receiver.php'

  })

});

fis.media('qa').match('*', {

  deploy: fis.plugin('http-push', {

    receiver: 'http://remote-qa-host/receiver.php'

  })

});
    • fis3 release rd push 到 RD 的远端机器上
    • fis3 release qa push 到 QA 的远端机器上

3、文件指纹

给文件添加 MD5 戳

fis.match('*.{js,css,png}', {

  useHash: true

});

　　　　前端工程构建工具FIS3

4、压缩资源

fis.match('*.js', {

  // fis-optimizer-uglify-js 插件进行压缩，已内置

  optimizer: fis.plugin('uglify-js')

});

fis.match('*.css', {

  // fis-optimizer-clean-css 插件进行压缩，已内置

  optimizer: fis.plugin('clean-css')

});

fis.match('*.png', {

  // fis-optimizer-png-compressor 插件进行压缩，已内置

  optimizer: fis.plugin('png-compressor')

});

5、CssSprite图片合并

// 启用 fis-spriter-csssprites 插件

fis.match('::package', {

  spriter: fis.plugin('csssprites')

})

// 对 CSS 进行图片合并

fis.match('*.css', {

  // 给匹配到的文件分配属性 `useSprite`

  useSprite: true

});

这个不支持我的node版本（v6.11.0），但是官网写的可以支持6.x，所以不知道是什么问题。很久以前用过这个，没有问题，感觉现在缺少维护了。

四、启动

　　FIS3 内置一个简易 Web Server，可以方便调试构建结果。 　　

1、发布到内置 Web Server的根目录下，当启动服务时访问此目录下的资源

fis3 release

注：加  -w  可以监听文件

2、启动本地 Web Server，当此 Server 启动后，会自动浏览器打开 http://127.0.0.1:8080

fis3 server start

FIS3官网 http://fis.baidu.com/fis3/index.html

END------------------------------------------------------------------

相关文章