Skip to content

Latest commit

 

History

History
100 lines (72 loc) · 4.37 KB

11.md

File metadata and controls

100 lines (72 loc) · 4.37 KB
Raw

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'
});
  • 关于自动合成精灵图更多的文档

更多学习链接