看过了github上的api,各种参数的配置,真正放到项目中运用还是会遇到种种问题;fis的开发者还是很热心,遇到的每个问题都很热心的帮你解答,解释fis的原理。
项目的目录结构是这样的:
写好配置文件,直接fis release –dest ../webrelease –md5,运行后没有问题,文件都发布到上级目录的webrelease文件夹,但是一查看文件源码,源码里面还是原来的地址,没有变成期望的md5后的地址。
显然静态文件都发布成功了,页面没有重写地址,原来是这样的:fis不能预测所有文件后缀与isJsLike、isHtmlLike、isCssLike文件的对应关系,因此当你们使用的时候发现fis没有把某种文件当做对应的代码来处理,就可以用roadmap.path来标记一下
解决办法:升级到最新版本 或者添加配置参数
- fis.config.set(‘roadmap.path’, [
- { reg : ‘**.ftl’, isHtmlLike : true }
- ]);
一个问题解决了,很开心的发布第二次,这次的命令是 fis release –dest ../webrelease –pack,运行后还是源码的问题,明明官网得demo运行添加–pack参数后由原来的
- <link rel=“stylesheet” href=“/static/pkg/css1.css”/>
- <link rel=“stylesheet” href=“/static/pkg/css2.css”/>
变成了
- <link rel=“stylesheet” href=“/static/pkg/pkg.css”/>
很傻很天真的以为配置写错了,检查了很久的问题还是没有结果,又去请教了瓶子大神,结果是这样的:fis官网的静态资源合并是利用了后端接口的,fis生成了一张静态资源表(map.json),后端提供一个接口去查表收集资源,在页面访问的时候动态的加载表并且计算页面所需最少资源的链接;换句话说–pack 只是把静态资源做了文件合并操作 ,至于页面显示 单个 还是多个 是后端要做处理的 ;
这里解释的很清楚:https://github.com/fis-dev/fis/wiki/%E5%9F%BA%E4%BA%8Emap.json%E7%9A%84%E5%89%8D%E5%90%8E%E7%AB%AF%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1%E6%8C%87%E5%AF%BC
继续下一个需求:把文件直接发布到远程服务器 –remote,意识很清晰,需要在服务端配一个文件接收服务,就直接copy了官网的php实现,又在本地整了个php,运行receiver.php一切ok;
运行:fis release -d remote 等待奇迹的发生,显然奇迹没有发生
我的remote配置是这样写的:
- remote : {
- from : ‘/Users/rainweb/programs/store/store-web/src/main/webrelease’,
- to : ‘/Users/rainweb/tools/fis-first/www’
- }
给瓶子大神一看说不对,你这from有问题,要跟你解释from,就要从fis上传的工作原理开始:
首先,再次说明,fis是从内存中直接上传的,不是先把内容暂存到什么地方再上传
其次,每个文件的release属性,决定了文件的发布地址,那么这from其实就是指的release的属性
举个例子,假设你执行了fis release -d ../output,那么你可以在output目录下看到编译结果对吧,编译结果的目录结构就是你在fis-conf.js里配置的。假设这里面现在的目录结构是
../output
template/
static/
config/
那么,from就是:
‘/’ => 表示所有产出结果
‘/template/’ => 表示上传template目录下的所有文件
‘/static/’ => 表示上传static目录下的所有文件
‘/config/’ => 表示上传config目录下的所有文件
但是,你不需要先执行一步 fis release -d ../output,因为fis上传的不是那个目录
fis的工作方式是:
1 获取项目文件
2 内存中for循环编译文件内容
3 内存中for循环所有编译文件,根据命令行的-d参数逐个发布到指定位置。
比如 fis release -d output,preview,../build,remote,这种命令,fis的发布方式就是
for(var i = 0, len = files.length; i < len; i++){
files[i].deploy(output);
files[i].deploy(preview);
files[i].deploy(../build);
files[i].deploy(remote);
}
总结:文件上传的文件是不会发布到本地的,是通过读取内存直接把文件post出去,所以我这的from配置了本地路径当然找不到文件,服务端接收不到也是正常的;于是我的配置变成了这样:
- deploy : {
- remote : {
- receiver : ‘https://localhost/receiver.php’,
- to : ‘/Users/rainweb/tools/fis-first/www’
- },
- local : {
- to : ‘../webrelease’
- }
- }
然后:fis release -d remote奇迹真的发生了,文件刷刷刷的传到那个站点了;
所以此处是from配置的是从你产出的目录中做文件筛选,进行上传,当然这个产出的目录不会在本地,是在内存中,如:from: /js,form: /css就分别把js,css目录的文件post到远程服务器,其他目录下的不做处理。
总结:之前看的过程中,自己对fis的认识还是很浅,只知道按照默认的配置运行是不会有什么问题,但是真的到实践中,还会遇到各种不同层面的问题;看待一个新技术,切入的角度不一样,我们的认识也不一样,当我们不再从应用层去思考问题的时候,或许我们离真的认识它不远了。。。
FIS实战篇,首发于rainweb前端开发。
转载请注明:TUTERM.COM » FIS实战篇