FIS项目理解使用

先讲一下fis项目的目录结构

    >config  --fis依赖表

    >page  --页面模板

    >static  --静态文件

    >test  –-mock数据

    >widget  --项目公共组件

    >.gitignore  --git忽略提交规则

    >build.sh  --jenkins上线配置文件

    >debug.log  --调试程序的日志

    >fis-conf,js  --fis配置文件

    >replace.sed  --FE项目中有一些公共模块像是common和mcommon，这个文件可以隐射公共模块，达到其他项目使用公共模块的目的

    >server.conf  --启动本地服务指针（包括模板和moke数据）

 

fis的三大特性

    >资源定位

    资源定位能力，可以有效的分离开发路径与部署路径之间的关系。工程师只需要使用相对路径来定位自己的开发资源即可，构建过程中对资源 URI 进行了替换，替换成了绝对 URL。这样工程师就不用担心上线后资源路径问题，而且可移植性很高。

    >内容嵌入

    嵌入资源即内容嵌入，可以为工程师提供诸如图片base64嵌入到css、js里，前端模板编译到js文件中，将js、css、html拆分成几个文件最后合并到一起的能力。这样可以减少http请求，提高工程的可维护性。

    >依赖声明

    编译过程中会扫描编译标记建立一张静态资源关系表。资源关系表详细记录了项目内的静态资源id、发布后的线上路径、资源类型以及 依赖关系 和 资源打包 等信息。后端或前端框架拿到这张表根据组件所需的包按需加载资源，从而提升前端运行的性能。

 

fis的命令

    >fis3 relaese

    编译并发布你的项目

        >-h或--help 帮助

        >-d或--dest   编译后的代码部署路径

        >-w或--watch  监听文件变化触发编译

        >-L或者--live 编译后自动刷新浏览器

        >-c或者–clean 清除这个项目本地服务

        >-l或者--lint  编译的时候自动代码检查

        >-u或者--unique  编译缓存

        >-r或者--root  指定项目权限

        >--no-color  变色输出

    >fis3 install 

    使用fis安装一些公共的组件

    >fis3 server 

    启动一个本地服务器，它采用php-java-bridge技术实现， 依赖java、php-cgi外部环境。

        >start 启动服务

        >stop 关闭服务

        >resatrt 重启服务

        > info 输出服务器信息

        >open打开服务器目录文档

        >clean 清除服务器目录的文件

        >install 下载

        >init 初始化服务器框架

    >fis3 inspect

    查看文件命中的属性，这些属性决定文件该如何编译

 

简单解释一下fis-conf.js 文件

    //使用smarty模版

    fis.require('smarty')(fis);

 

    //设置项目名

    fis.set('namespace', 'kd-activity');

 

    //解析less文件

    fis.match('*.less', {
        parser: fis.plugin('zuoye-less'),
        optimizer: false,
        useHash: true,
        rExt: '.css'
    });

 

    //解析js文件

    fis.match('*.js', {
        optimizer: false,
        parser: fis.plugin('zuoye-babel-6.x')
    });

 

    //开发环境的配置

    fis.media('dev')

        .match('*.tpl', {

            optimizer: fis.plugin('html-compress', {
            level: 'strip_comment'
        })
    }).match('*.less', {
        optimizer: fis.plugin('clean-css')

    }).match('*', {
        deploy: fis.plugin('local-deliver', {

            //本地server的文件目录
            to: 'C:/Users/zuoyebang/AppData/Local/.fis-plus-tmp/www'
        })
    });

 

    // 生产环境 意思就是匹配一些文件，做压缩呀这些处理
    fis.media('prod').match('::package', {
        packager: fis.plugin('map', {
            '/pkg/dreamSchool/pkg_dreamSchool.js': [
                '/static/dreamSchool/msgs.js',
                '/static/dreamSchool/dreamSchool.js'
            ],
            '/pkg/dreamSchool/pkg_dreamSchool.css': [
                '/static/dreamSchool/**.less'
            ]
        })
    }).match('!*.{html,tpl}', {
        useHash: true
    }).match('*-map.json', {
        release: '/config/$0',
        useHash: false
    }).match('*.tpl', {
        optimizer: fis.plugin('html-compress', {
            level: 'strip_comment'

        })
    }).match('*.js', {
        optimizer: fis.plugin('uglify-js')
    }).match('*.less', {
        optimizer: fis.plugin('clean-css')
    }).match('*.{css,js,png,jpg,bmp,gif,less}', {
        // domain: 'https://yy-s.zuoyebang.cc'
    });

 

    //本地文件对应和对应的线上文件目录

    var deployConfig = [{
        from: '/page/**', // 模板
        to: '/home/homework'
    }, {
        from: '/static/**', // 静态资源
        to: '/home/homework/webroot'
    }, {
        from: '/widget/**/*', // widget
        to: '/home/homework/webroot'
    }, {
        from: '/widget/**/*.tpl', // widget
        to: '/home/homework'
    }, {
        from: '/config/**', // config
        to: '/home/homework/data/smarty'
    }, {
        from: '/plugin/**', // plugin
        to: '/home/homework/php/phplib/ext/smarty/baiduplugins',
        subOnly: true
    }];

 

    //所有的开发机器

    var deployTargets = {
        kd12: {
            host: '172.30.132.12',
            user: 'rd'
        },
        kd12test: {
            host: '172.30.132.12',
            user: 'test'
        },
        test295: {
            host: '192.168.241.115'
        },
        test299: {
            host: '192.168.241.119'
        },
        test170: {
            host: '192.168.240.212'
        },
        test171: {
            host: '192.168.240.209'
        },
        test172: {
            host: '192.168.240.218'
        },
        test173: {
            host: '192.168.240.203'
        }
    };

 

    //使用http-push将对应的文件发送到远程的机器上

    fis.util.map(deployTargets, function(serverName, serverConfig) {
        var _deployConfig = fis.util.clone(serverConfig.deploy || deployConfig.map(function(item) {
            return Object.assign({}, item, {
                to: item.to.replace(/homework/, serverConfig.user || 'homework')
           });
        }));

        for (var i = 0; i < _deployConfig.length; i++) {
            var _deploy = _deployConfig[i];
            fis.media(serverName).match('*-map.json', {
                release: '/config/$0',
                deploy: fis.plugin('http-push', {
                    receiver: 'http://' + serverConfig.host + ':8020/fisreceiver.php',
                    to: '/home/homework/data/smarty'.replace(/homework/, serverConfig.user || 'homework')
                })
            }).match(_deploy.from, {
                deploy: fis.plugin('http-push', {
                    receiver: 'http://' + serverConfig.host + ':' + (serverConfig.port || '8020') + '/fisreceiver.php',
                    to: _deploy.to,
                    useHash: true
                })
            });
        }
    });

 

build.sh

    build.sh是属于jenkins上线时的执行文件，将文件发布到所有得机器上。

 

fis的工作原理

    fis是基于文件对象进行构建的，每个进入fis的文件都会实例化成一个file对象，整个过程其实都是对这个文件的构造操作过程。构建过程可能使用插件进行扩展。

 

执行大概流程

    >本地release

        本地操作启动fis自带得服务器，然后将代码release打包发送到本地服务得目录下，这样就可以在本地服务下操作了。

    >测试机release

       代码release打包，使用http-push发布到测试机得/fisreceiver.php接口上（此接口用于接收文件，部署到指定路径），这依赖于php不需要编译不用重启的特性，所以我们就直接可以访问。

 

fis VS fisp

    fis产生之初的定位是做一个内核，编译体系可以简单通过基本配置+插件的方式扩展（fisp），fisp适合于后端PHP+Smarty的编译体系。

    fis是没有目录规范的，fisp有一套成型的目录规范。

    fisp有一系列PHP+Smarty的实现插件。

    fisp实现了产出map.json，解决了很多问题以及自动打包。

    fisp的本地调试额外提供了本地数据模拟，URL模拟转发的功能。