一、初识FIS
在做项目中遇到了静态资源浏览器缓存更新的问题，于是在网络上寻找解决方案。之前虽然没有解决过这个问题，但方法无非就是为其设定新URI使得浏览器强制更新。这个过程听起来还是相当简单的。
也是无意中搜索到了知乎上的一个帖子 大公司里怎样开发和部署前端代码？
看到这个文章中提到了FIS，跟随着文章开始学习走起，有点小兴奋，只不过很快便发现问题更多。
二、尝试
原本只是想着有个工具可以将前端资源打个标识，这样就可以轻松的解决浏览器静态缓存更新问题。FIS的描述也确实如此，那么就开始动手搞起吧。
安装
FIS是基于Nodejs开发，所以nodejs必须有。装起。。
然后通过npm命令装起， npm install -g fis。结果卡死了。
由于是第一次接触，所以在baidu上找了半天也没找到方案。放弃。。。
发现了官方视频教程，于是花时间看了几集，大概了解到FIS这个工具还是挺简单的。而且解决了前端开发的问题：
1、资源压缩
2、md5戳
3、资源合并
貌似比较有用的功能就这几个。而我最关心的就是md5戳咯。。
md5戳
所谓Md5戳就是这样的：
加戳后是这样的：
当然文件本身名称也变了：script/placeholder_88025f0.js
这样一来解决了两个问题：
1、引用静态资源的URI变了，那么自然浏览器会取新的资源，解决了更新缓存的问题
2、md5是通过文件计算得来，所以只有文件发生变化了才会产生新的URI，反之就不用变了，这就解决了增量更新的问题，同时兼顾了流量功击
当然对于我这种小项目来说第2点几乎没啥用。
再尝试安装
既然知道了好处，那就继续装吧，打开fis官方网站： http://fis.baidu.com，这里面有入门教程，这点毕竟百度团队公开的帮助还是相当可以的。而且是中文滴，好有亲近感。。找了原因可能是npm网站动不动会被墙导致的。。那么，官方也有方案，使用镜像：
npm install some-npm-module -g --registry=国内镜像 --disturl=https://npm.taobao.org/dist这些东西官方网站都有提到，就不多说啦。出门左转去这里： https://github.com/fex-team/fis/issues/65
这次好了，安装好了，fis -v
三、遇到问题
装好了后那就开始在项目中用吧，这才发现自己太年轻。。。。。。
1、配置
直接使用fis release -md ../output，好了开始生成与发布。结果完蛋了，不管阿猫阿狗全部js/css/imgs都添加了md5戳。这可就麻烦了，完全不是自己想要的，也就是说直接通过一个工具一键解决加Md5戳的问题太理想了。
那么只好去研究官方的文档，了解具体的配置方式。在FIS中都是通过fis-conf.js这个文件来进行配置。官方例子：
| // 设置图片合并的最小间隔 fis.config.set('settings.spriter.csssprites.margin', 20);
// 取消下面的注释开启simple插件，注意需要先进行插件安装 npm install -g fis-postpackager-simple fis.config.set('modules.postpackager', 'simple');
// 取消下面的注释设置打包规则 fis.config.set('pack', { '/pkg/lib.js': [ 'js/lib/jquery.js', 'js/lib/underscore.js', 'js/lib/backbone.js', 'js/lib/backbone.localStorage.js', ], // 取消下面的注释设置CSS打包规则，CSS打包的同时会进行图片合并 '/pkg/aio.css': '**.css' });
// 取消下面的注释可以开启simple对零散资源的自动合并 fis.config.set('settings.postpackager.simple.autoCombine', true); |
| fis.config.merge({ roadmap : { path : [ { //所有widget目录下的js文件 reg : 'widget/**.js', //是模块化的js文件（标记为这种值的文件，会进行amd或者闭包包装） isMod : true, //默认依赖lib.js requires : [ 'lib.js' ], //向产出的map.json文件里附加一些信息 extras : { say : '123' }, //编译后产出到 /static/widget/xxx 目录下 release : '/static$&' }, { //所有的js文件 reg : '**.js', //发布到/static/js/xxx目录下 release : '/static/js$&' }, { //所有的ico文件 reg : '**.ico', //发布的时候即使加了--md5参数也不要生成带md5戳的文件 useHash : false, //发布到/static/xxx目录下 release : '/static$&' }, { //所有image目录下的.png，.gif文件 reg : /^\/images\/(.*\.(?:png|gif))/i, //访问这些图片的url是 '/m/xxxx?log_id=123' url : '/m/$1?log_id=123', //发布到/static/pic/xxx目录下 release : '/static/pic/$1' }, { //所有template目录下的.php文件 reg : /^\/template\/(.*\.php)/i, //是类html文件，会进行html语言能力扩展 isHtmlLike : true, //发布为gbk编码文件 charset : 'gbk', //发布到/php/template/xxx目录下 release : '/php/template/$1' }, { //前面规则未匹配到的其他文件 reg : /.*/, //编译的时候不要产出了 release : false } ] } }); |
2、资源定位
所谓资源定位，就是在html/js/css中定位到资源引用，将FIS编绎(生成)过的新资源替换进去。那么其实挺简单的，就像本文最开始说的例子：
加戳后是这样的：
这样每次发布都是自动完成了资源更新，有点小爽。。只不过问题来了。。。FIS目前替换后的URI是绝对路径。这句话什么意思？
比如，一个css代码：
.h_login-conimgbg{background:transparent url('img/lgoin_image.png') no-repeat; height:406px;}
其中引用了img/lgoin_image.png这个图片。但是经过FIS编绎后是什么样：
.h_login-conimgbg{background:transparent url('/css/img/lgoin_image_369f159.png') no-repeat; height:406px;}
FIS直接将绝对路径进行的替换，这就带来了一个问题，原先是相对目录，换成绝对目录后就变成了根目录了。会有啥问题呢？
如果使用了二级目录就会出现问题，比如系统部署在tomcat的webapps下的myweb目录中，访问时：http://localhost:8080/myweb。那么上面css定位资源时是http://localhost:8080/myweb/css/img/lgon_image.png。
可是FIS编绎后就会这样：http://localhost:8080/css/img/lgon_image_369f159.png。这样就无法访问了。于是我在FIS的讨论区咨询了这个问题，给的回复是：
现在全部是绝对路径，主要是考虑到资源合并和 cdn 部署的功能实现
这么一来就只能通过其他的方式解决，比如，roadmap里可以配置资源的url生成时添加domain，这个方法原本是用来做cdn部署时使用的。但是也可以解决上面的问题。
3、不想处理的文件
在系统里使用了许多第三方资源，如jquery、jqueryUi等库，但这些库我们基本不会去修改代码，也就不存在那些静态资源压缩、添加md5的问题了。那当然就不想在FIS里处理这些文件，而FIS是默认处理所有的js/css/imgs。这也就涉及到了配置的问题。
fis.config.merge({
roadmap : {
path : [
{
//plugin的js文件
reg : /^\/plugin\/(.*\.(?:js|css))/i,
useHash : false,
useCompile : false,
url : '${appServer}$&',
}
]
}
});
这是我截取的一个配置片段，通过reg来定位具体的目录
好了，有了这个配置，plugin下的js/css就不会被处理了。
四、阶段感受
其实到最后我已经放弃了，因为项目会用到jenkins hudson做集成，这里面还有许多的部署问题，时间关系就不愿意再深入了。原本想的用个工具加个md5戳或者版本号的想法破灭了。
但是收获还是有的：
1、前端的工程化原来可以有这么出格的思路，其实并没有什么特别大的进步，只不过是看起来很叼的样子。而且FIS感觉是起步阶段，对于开发相对较为规范的项目确实是可以考虑的一个辅助工具
2、真正让我觉得有意思的地方是前端模块化。这部分是FIS里的进阶，真正的前端工程其实是这部分。我在前端方面的经验太少了，仅仅是初步水平，所以这部分高级内容需要花时间学习和实践
3、无论产前端还是后端都是程序员，都是工程师。