• fis前端开发框架


      FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架,相比gulp和grunt更傻瓜化,上手更容易,最近抽空学习了一下,分享一下心得。

      FIS官网: http://fis.baidu.com/

      FIS开发文档API:http://fis.baidu.com/docs/beginning/getting-started.html

      慕课网FIS教程: http://www.imooc.com/learn/220

    一、fis安装

    npm install -g fis   全局安装fis

    这里一定要全局安装,不然如果我们--save-dev 安装fis   然后--save-dev 安装lights会报错,其实这样全局安装也有好处,就是我们可以全局用fis命令。

    2.安装ligths包管理器

    npm install -g lights

    文档https://github.com/fex-team/lights/blob/master/doc/node_module.md

    Lights提供的包管理功能不仅能够通过简单命令就完成一系列操作,同时提供了私有仓库供产品线维护私有资源。
    使用npm安装Lights (注意已安装的请更新至0.0.86及以上版本)。

    3.获取示例

     lights install fis-quickstart-demo

    #进入DEMO目录 cd fis-quickstart-demo
    #编译并发布DEMO fis release
    #命令启动FIS的本地调试服务器功能对构建发布的项目进行预览调试 fis server start

    这里注意一下:我们可以把最近的静态资源那里,fis-conf.js,fis-conf-no-std.js,fis-conf-timestamp.js,package.json移入自己的项目里也可以实现fis的自动化处理,输出的文件到output里面含义map.json对应处理文件路径的依赖关系。

    4.资源压缩

    资源压缩一直是前端项目优化中非常重要的一环,使用FIS我们无需任何配置,只需要一个命令就可以完成压缩工作。

    fis release --optimize  //一行密令压缩
    
    fis release --optimize   --d  ../output    //输出文件到相对项目的output文件

    5.FIS默认的产出目构录
    FIS构建并不会修改源代码目录中的内容,而是拥有独立的产出的目录,FIS默认的产出目构录可以通过 fis server open 打开,你也可以通过 fis release -d path/to/output 指定你希望的输出目录

    打开产出文件目录:

     fis server open 

    发布到项目根目录的output目录下, 注意,这里的output其实是一个内置的部署配置名,而不是一个目录名

    fis release -d output

    发布到相对 工作目录 的路径

    fis release -d ../output

    发布到绝对路径:

    fis release -d /home/work/ouput
    # win
    fis release -d d:/work/output

    使用配置文件的 deploy节点配置 进行发布,此配置可将代码上传至远端

    fis release -d remote

    6.添加文件版本
    FIS能够根据静态资源的内容自动生成文件版本,自动更新资源引用路径,解决缓存更新问题,告别手动更新时间戳。
    我们通过开启 --md5 参数,为项目中的静态资源添加md5版本号

    $ fis release --optimize --md5 # fis release -om

    7.设置打包
    FIS可以通过pack来进行资源文件的合并,比如我们需要将DEMO中的公共库文件打包在一起,可以修改fis-conf.js配置,加入pack配置

    //Step 1. 取消下面的注释开启simple插件,注意需要先进行插件安装 npm install -g fis-postpackager-simple
     fis.config.set('modules.postpackager', 'simple');
    
    //通过pack设置干预自动合并结果,将公用资源合并成一个文件,更加利于页面间的共用
    
    //Step 2. 取消下面的注释开启pack人工干预
     fis.config.set('pack', {
         'pkg/lib.js': [
             '/lib/mod.js',
             '/modules/underscore/**.js',
             '/modules/backbone/**.js',
             '/modules/jquery/**.js',
             '/modules/vendor/**.js',
             '/modules/common/**.js'
         ]
     });
    
    //Step 3. 取消下面的注释可以开启simple对零散资源的自动合并
     fis.config.set('settings.postpackager.simple.autoCombine', true);
    
    
    //Step 4. 取消下面的注释开启图片合并功能
     fis.config.set('roadmap.path', [{
         reg: '**.css',
         useSprite: true,  //合并雪碧图
         useHash:true   //使用md5
     }]);
    fis.config.set('settings.spriter.csssprites.margin', 20);

    8.插件安装fis-postpackager-simple进行打包处理

    fis插件的安装分为两步,首先我们需要通过npm包管理工具进行插件安装

    $ npm install -g fis-postpackager-simple

    插件安装到本地后,我们还需要通过项目配置文件开启插件,修改项目根目录下的fis-conf.js配置,开启fis-postpackager-simple插件

    $ cd fis-quickstart-demo
    $ vi fis-conf.js #vi是linux下的文本编辑器,windows用户可以选用任意文本编辑器对fis-conf.js文件进行编辑。
    
    //file : fis-conf.js
    fis.config.set('modules.postpackager', 'simple');

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

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

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

    //file : fis-conf.js
    //开启autoCombine可以将零散资源进行自动打包
    fis.config.set('settings.postpackager.simple.autoCombine', true);
    再次运行FIS构建项目
    $ fis release -omp

    11.合并图片
    在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'
    });
    再次运行FIS构建项目
    $ fis release -omp

    12.fis自动化文件监听,自动刷新

    文件监视
    通过文件监视功能,我们可以要求FIS在项目文件出现修改时,自动增量构建项目文件

    fis release --watch #fis release -w

    自动刷新
    我们只需要在文件监视的参数基础上添加 --live 或 -L 参数即可实现在项目文件发生修改后,自动刷新页面的功能,大幅提高页面制作效率。

    fis release --watch --live #fis release -wL       #要求浏览器环境支持WebSocket

    大体上就学到了这些同学,用过之后,整体感觉fis自动化,比较适合要求快速开发的项目,我们静态开发,然后用fis进行压缩,加版本好,然后获取发布文件修复路径,删除配置文件发布,就ok了。以后我也将结合fis、grunt、gulp一起来使用,我想会很棒。

  • 相关阅读:
    《构建之法》第五章读后感
    《构建之法》第四章读后感
    《构建之法》第三章读后感
    《构建之法》第二章读后感
    《构建之法》第一章读后感
    web mis系统构建
    异常
    多态
    接口与继承
    个人总结_5.8
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/4519454.html
Copyright © 2020-2023  润新知