构建工具F.I.S的快速使用

最新推荐文章于 2024-03-22 09:51:49 发布

Wang's Blog

最新推荐文章于 2024-03-22 09:51:49 发布

阅读量419

点赞数

分类专栏： Workflow | Builder | Debugger 文章标签： fis3

本文链接：https://blog.csdn.net/tyro_java/article/details/79657171

版权

Workflow | Builder | Debugger 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

fis 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。目前版本为F.I.S 3 快速查看fis官网

fis 安装

$ sudo npm install -g fis3
备注：sudo在linux和mac系统上使用

fis相关解决方案

fis-plus ：基于PHP的前端集成解决方案，面向自动化，减少人工管理静态资源成本和风险，全自动优化页面性能、减少服务器开销；面向定制化，包括PC、Mobile、I18n等大量个性化解决方案。
yog2：基于Node的前后端解决方案
jello：基于Java的前端集成解决方案
pure：纯前端模块化解决方案
gois：基于Go的前后端解决方案
根据不同的解决方案需要安装不同的工具，详情查看文档

快速开始的仓库

fis-quickstart-demo@github

fis 相关命令

$ fis install: 此命令安装一些公共库组件比如 jQuery、echarts，我们提供的组件都放在 https://github.com/fis-components 仓库中。
$fis release: 命令用于编译并发布的你的项目，拥有多个参数调整编译发布操作。
- $ fis release --optimize：资源压缩，同 fis release -o
- $ fis release --optimize --md5：添加文件版本（md5戳），同 fis release -om
$ fis server: 命令可以启动一个本地调试服务器用于预览fis release产出的项目。
- $ fis server start：启动FIS的本地调试服务器功能对构建发布的项目进行预览调试

fis相关配置

设置打包

fis.config.set('pack', {
    '/pkg/lib.js': [
        'js/lib/jquery.js',
        'js/lib/underscore.js',
        'js/lib/backbone.js',
        'js/lib/backbone.localStorage.js',
    ]
});

设置完pack后，FIS默认只会进行文件打包，不会对页面中的静态资源引用进行替换，我们可以通过引入后端静态资源管理来加载打包模块。不过也可以利用fis-postpackager-simple插件，可以自动将页面中独立的资源引用替换为打包资源。

插件的安装

首先我们需要通过npm包管理工具进行插件安装： $ npm install -g fis-postpackager-simple
插件安装到本地后，我们还需要通过项目配置文件开启插件，修改项目根目录下的fis-conf.js配置，开启fis-postpackager-simple插件: $ fis.config.set('modules.postpackager', 'simple');

应用打包

为了开发调试时更加方便 fis release 默认不会合并资源，在指定了 –pack 参数后，FIS才会进行打包合并处理。

$ fis release --optimize --md5 --pack 或 fis release -omp

自动打包

利用simple插件，我们还可以按页面进行自动合并，将没有通过pack设置打包的零散资源自动合并起来。

//file : fis-conf.js
//开启autoCombine可以将零散资源进行自动打包
fis.config.set('settings.postpackager.simple.autoCombine', true);

再次运行FIS构建项目: $ fis release -omp

合并图片

通过上述几个步骤，我们已经成功将脚本资源和样式表资源进行了合并，但是为了进一步的减少HTTP连接数，我们还可以对引用的图片资源进行进一步的合并。
在FIS中，如果样式文件中引用图片时，添加了 ?__sprite query，那么将样式文件使用 pack 设置进行合并后，不仅仅会合并样式文件，还会将所有标识了合并的图片进行合并处理。
我们通过 pack 设置，将所有样式文件合并为 aio.css

fis.config.set('pack', {
    '/pkg/lib.js': [
        'js/lib/jquery.js',
        'js/lib/underscore.js',
        'js/lib/backbone.js',
        'js/lib/backbone.localStorage.js',
    ],
    '/pkg/aio.css': '**.css'
});