前端工程构建工具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------------------------------------------------------------------