β

初涉大百度前端集成方案—FIS

rainweb前端开发 225 阅读

前端开发注定是一个杯具的职业,没有一套系统的集成方案,只会越来越苦逼,最后不能自拔。

FIS全称为Front-end Integrated Solution,即前端集成解决方案。

前端团队发展大多会经历规范设计、技术选型、系统拆分、性能优化等阶段,其中的技术需求可以总结为前端集成解决方案。

前端优化是一个老生常谈的问题了,FIS为我们解决了哪些问题呢?

静态资源管理与整合,这看上去比较抽象,简单的说:js css文件打包合并,压缩,版本控制,上线后的缓存问题,各种前端面对的揪心事,理论上不止js css文件,只要是静态资源它都很很好的帮你去管理,解除你上线遇到的各种烦恼;

一步步配置FIS:

1、运行环境

操作系统:任何能安装 nodejs 的操作系统  
node版本:>= v0.8.0  
jre版本:>= v1.5.0 【如果不需要本地调试服务器,可以忽略java环境要求】  
php-cgi版本:>= v5.0.0 【如果不需要本地调试服务器,可以忽略php-cgi环境要求】  

安装php-cgi的时候遇到了问题,开始一直没搞定,一厢情愿的以为只要可以运行php代码就有了php-cgi环境;

wayneeaker.com/blog/2012/04/05/setting-php-cgi-mac-os-x这篇文章解决了我的问题;(看来对于linux还有很长的路要走);

2、安装F.I.S编译工具

npm install -g fis  
//安装好fis之后,执行 fis -v看到以下界面  

1

执行 fis –help 让我们来看一下fis命令的相关帮助:  
  
Usage: fis <command>  
  
Commands:  
  
  release     build and deploy your project  
  install     install components and demos  
  server      launch a php-cgi server  
  
Options:  
  
  -h, –help     output usage information  
  -v, –version  output the version number  
  –no-color     disable colored output  

接下来可以fis install 官方例子了,运行例子还需安装smary,fis-parser-marked依赖

对项目进行编译:fis release –可添加各种参数;

启动服务:fis server start –no-rewrite;

访问:http://localhost:8080;

这里可以看下 编译的时候加不加参数的区别: 
不加参数情况下查看源码:css的地址/static/lib/css/bootstrap.css;
加了–md5 –pack –optimize 再查看源码:此时css地址/static/pkg/aio_91f847b.css;

是不是开头说的那些烦人的问题都解决了。。。

3、为什么会这样

那FIS是怎么做到的?
项目里面还有一个fis-conf.js,这个js记录了整个项目所有静态资源的映射关系;
以及其他的属性设置,不仅仅js css文件,图片文件都可以做对应的映射,这也解决了图片换成的问题;

编译后的文件在哪里可以找到?
当然不会在当前项目的文件夹; 它会默认在当前用户文件夹下生成/Users/rainweb/.fis-tmp/www;
打开命令:fis server open

编译后的文件夹路径是否可以修改?

fis release -d /home/work/ouput;

点击这里有官方详细的使用说明

初涉大百度前端集成方案—FIS,首发于rainweb前端开发

作者:rainweb前端开发
专注于web前端开发,专注于用户体验
原文地址:初涉大百度前端集成方案—FIS, 感谢原作者分享。

发表评论