引言
前端相关的技术,是在发展的是太快了,稍微有段时间不关注就发现有新的东西出现了,作为一个
还在停留在使用jquery
阶段的伪前端,想跟上前端发展的脚步实在有些吃力。
还好之前在某著名广告搜索引擎公司工作过,当时公司缺少前端,我做了3个多月的全职前端,这 期间学到了好多东西,他们所用的那套前端也是我接触过的几家公司里面最好用的,前后端分离的 很彻底,开发前,前后端定好接口,就可以多进程开发了,互不影响,前端对测试数据也支持的很好。
而前端的这一套使用流畅的系统是基于fis开发的,
目前最新的版本是fis3,目前已经开源,协议是BSD 2-clause
,对使用者基本没有什么限制,
可以放心使用,下面是官方对发的解释:
FIS3 面向前端的工程构建系统。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。
FIS3可以做什么
编译前端资源
现在的前端已经不是以前的那种直接写css、html、javascript了,都可以选用类似less\sass、 jade/hbs、TypeScript/CoffeeScript等语言,然后编译成为最终的css、html、JavaScript, 这些中间语言(编译之前的语言)有看起来更简洁、更符合人类编写的过程等优点(当然他们其中也是 有些缺点,比如学习成本问题、不兼容之前的代码问题等),因此好多现代化的公司都会部分或者完全 的采用这些语言来提升开发效率、项目可维护性。
这样的话就有了问题了,这个编译过程谁做呢,怎么做呢,每次开发完之后都要手动编译吗,这样会很 麻烦,很容易遗漏掉东西,或者还需要开发者自己编写类似Makefile的功能,每次完成开发运行一次 编译。使用FIS的话可以很容易的帮我们做这个工作,它使用node的开源库,只需要一个配置就可以完成 这项工作,配置的话使用js,不会js也可以按照文档配置。
静态资源升级问题
一般我们队使用cdn的资源升级的时候会引入版本号的概念,当有资源改动的时候手动去修改引用资源的 地方,这样就很麻烦了,如果修改了图片,可能会修改html、css对应的文件,多了的话,很容易改错、 改漏,导致线上出问题。另外一种方式就是所以资源相关的版本号都从配置读取,用同一个版本号,这样是 容易点儿,好管理,升级资源后,只需要升级版本号就行了,但这样浪费很大,比如我们只修改了一个图片 文件,升级了版本号,其他所有使用这个统一版本号的资源都升级了,浏览器端的缓存会过期掉,浪费带宽 流量、服务器资源。
这个时候如果有FIS的话,就容易多了,他会自动解析引用关系,比如我们修改了资源图片A,编译之后引用 A的地方会自动升级为新的版本号(一般设置为文件指纹md5),而其他资源还是原来的版本号,完全不用我 们去手动修改,开发者只需要关注开发就行,其他这些版本升级什么的完全可以不用理会。
测试
可以很容易启动本地服务器,然后本地调试,测试数据也很容易设置。还可将文件发送到远程服务器,只需要 在远程设置接受文件就可以,联调的时候很方便,另外还有监听文件的功能,每次修改文件之后就可将修改 的文件增量的同步到指定位置。
资源表
资源表map.json
设FIS中很优秀的一个设计(参考了Facebook的相关技术),他扫描了所有静态文件,记录
他们的发布位置和依赖关系。到这里FIS的工作基本就完成了,它生成了资源表,我们可以使用资源表做很多定制
化的事情。这就像是给我们了面、油盐酱醋,而不是直接给我们来了一份biangbiang面,我们自己可以做任何我
们想吃的面食了。
glob
glob
匹配这个真的很好用,在设置各种规则的时候都能用到,简单好用。完全可以满足各种要求,
下面就是匹配fis-conf.js
所在文件夹下面的widget
、page
下面的所有php文件,包括子文件夹中的。
如果只是当前文件夹下面的php文件,这里只需要将**
改为*
即可。
fis.match("/{widget,page}/**.php",{
isMod : true
})
压缩、合并
另外,像js、css压缩合并、图片雪碧图这些,都可以轻而易举的通过node插件+配置实现。
参考文章
我的大部分内容都是从官网和下面的博客中看来的,加上自己之前的简单实用总结的,下面这篇文章写的更详细 透彻点儿。