FIS使用心得

FIS   百度web前端研发部F.I.S团队，经过一年多的努力，推出的一套前端集成解决方案，解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题。

 

自己也小小 的研究了一下，从官网了解到fis已经历三个版本，目前是fis3的版本，功能更加易学易用，极大的提高了开发效率。

 

下面列出fis(2)版本的配置文件，供大家参考使用:

fis-conf.js

 

// CMD: fis server --root D:\web\fis-www-root start
// CMD: fis release --dest online --domains
// CMD: fis release --dest stg --domains
// CMD: fis release --dest local --domains
//fis.config.set('project.fileType.text', 'shtml');
 
fis.config.merge({
    project : {
        fileType : {
            text : 'tpl, shtml'
        }
    },
 
/*    settings: {
        postprocessor: {
            bt: {
                type: 'amd'
            }
        }
    },
*/
    roadmap : {
        domain: {
            "assets/css/**.css" : "http://www.abc.com",
            "**.js" : "http://www.abc.com"
        },
        path : [
            {
                //所有的js文件
                reg : '**.*',
                //发布到/static/js/xxx目录下
                release : '/$&',
                //访问这些url是
                url : '/app_js/huiyuan$&'
                //是类html文件，会进行html语言能力扩展
                //isHtmlLike : true
            }
        ]
    },
    
    deploy: {
            local: {
            to: "d:/web/fis-www-root/huiyuan",
            replace : {
                from : '/assets',
                to : 'http://www.abc.com'
            }
        },
        
        stg: {
to: "d:/web/fis-www-root/huiyuan",
            replace :{
                from : 'http://www.abc.com',
                to : 'http://stg.abc.com'
            }
        },
 
        online: {
            to: "d:/web/fis-www-root/huiyuan",
            replace : {
                from : 'http://www.abc.com',
                to : 'http://stg.abc.com'
            }
        },
        
        remote: {
            //如果配置了receiver，fis会把文件逐个post到接收端上
            //receiver : 'http://www.example.com/path/to/receiver.php',
            //从产出的结果的static目录下找文件
            from : '/output',
            //保存到远端机器的/home/fis/www/static目录下
            //这个参数会跟随post请求一起发送
            to : '/home/fis/www/',
            //通配或正则过滤文件，表示只上传所有的js文件
            include : '**.js',
            //widget目录下的那些文件就不要发布了
            exclude : /\/widget\//i,
            //支持对文件进行字符串替换
            replace : {
                from : 'http://www.online.com',
                to : 'http://www.offline.com'
            }
        }
    }
 
    
 
/*    modules: {
 
        postprocessor: {
            tpl: 'amd',
            js: 'amd'
        }
    }*/
 
 
});

 

 

而后面升级的fis3，则配置文件则简化了许多,示例如下：

fis-conf.js

// css背景图片合并
fis.match('::packager', { spriter: fis.plugin('csssprites') });
// 是 否使用hash
fis.match('*', { useHash: false });
//js压缩
fis.match('*.js', { optimizer: fis.plugin('uglify-js') });
// css 使用cssSprite方式
fis.match('*.css', { useSprite: true, optimizer: fis.plugin('clean-css') });
// png图片压缩
fis.match('*.png', { optimizer: fis.plugin('png-compressor')});
// 将所有.css,.less文件，合并生成到/static/aio.css
fis.match('*.{css,less}', {
  packTo: '/static/aio.css'
});
 
// 解析less文件为css文件并修改后缀
fis.match('*.less', {
    // fis-parser-less 插件进行解析
    parser: fis.plugin('less'),
    // .less 文件后缀构建后被改成 .css 文件
    rExt: '.css'
 
});
 
fis.match('*', {
  release: '/static/$0' // 所有资源发布时产出到 /static 目录下
});
 
fis.match('*.php', {
  release: '/template/$0' // 所有 PHP 模板产出后放到 /template 目录下
 
});
 
//fis3-hook-module
fis.hook('module', {
  mode: 'amd' // 模块化支持 amd 规范，适应 require.js
 
});