β

FIS实战篇

rainweb前端开发 96 阅读

看过了github上的api,各种参数的配置,真正放到项目中运用还是会遇到种种问题;fis的开发者还是很热心,遇到的每个问题都很热心的帮你解答,解释fis的原理。

项目的目录结构是这样的:

1

写好配置文件,直接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="http://www.rainweb.cn/article/“/static/pkg/css1.css”/>  
<link rel=“stylesheet” href=“/static/pkg/css2.css”/>

变成了

<link rel=“stylesheet” href="http://www.rainweb.cn/article/“/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 : ‘http://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前端开发

作者:rainweb前端开发
专注于web前端开发,专注于用户体验
原文地址:FIS实战篇, 感谢原作者分享。