前端工程构建工具FIS3

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

1、安装

1. 全局安装fis3

   npm install -g fis3 

2. 查看是否安装成功

   fis3 -v

    

 2、构建

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

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

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

• • 构建发布到指定路径

  • fis3 release -d <path>

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

    fis3 release -d ./output

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

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

   

3、配置文件

一、fis.match(selector, props)

• • selector：要匹配的文件路径
  • props：编译规则属性

fis.match('*.{png,js,css}', {   
  release: '/static/$0'
});

二、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 的远端机器上

三、文件指纹

给文件添加 MD5 戳

fis.match('*.{js,css,png}', {
  useHash: true
});

　　　　

四、压缩资源

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')
});

 五、CssSprite图片合并

// 启用 fis-spriter-csssprites 插件
fis.match('::package', {
  spriter: fis.plugin('csssprites')
})

// 对 CSS 进行图片合并
fis.match('*.css', {
  // 给匹配到的文件分配属性 `useSprite`
  useSprite: true
});

这个不支持个人node版本（v6.11.0），可是官网写的能够支持6.x，因此不知道是什么问题。好久之前用过这个，没有问题，感受如今缺乏维护了。

4、启动

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

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

fis3 release

注：加  -w  能够监听文件

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

fis3 server start

 

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

 

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