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 相关命令
- $
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'
});
- 关于自动合成精灵图更多的文档
960
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
