就在过去的若干月里面,FIS 团队和 @fouber 一起就 FIS 发布以来一年多的使用情况做了一些总结,并且对其不完善地方做了抽象,终于确定了 FIS 的下一代 FIS3。如今 FIS3 在 FIS 团队的努力下快要发布了;
先来个 里程碑 时间吧
FIS3 快要来了,那么 FIS3 到底有哪些新奇的地方;
之所以不是 FIS2 而是 FIS3 是由于已经开源的 FIS 前还有一个用 PHP 实现的 FIS, FIS 开源以来都被称为 FIS2.0。
2013 年上 FIS 在 @berg @walter @fouber 带领下的 FIS 团队的努力下诞生,并且解决了诸多前端工程问题以及给前端工程化一种新的思路。包括但不限于在模块化开发、自动化工具、资源加载、性能优化等等方面的突破。
FIS 通过对多年的前端项目的支持以及总结,发现前端语言不可或缺但是确实缺少的 三种语言能力 ,资源内嵌、定位资源、依赖声明。有了这 三种语言能力 就可以漂亮的解决各种前端工程需求下的性能优化、模块化开发等等问题。
FIS 提供工具增加了这 三种语言能力 ,并且给了一种资源加载管理的思路,基于静态资源表的静态资源管理方法,合理的解决了资源加载中的按需、同步/异步、依赖管理、缓存、合并、内嵌等工程问题。
FIS3 在 FIS 的基础上提升了易用性以及可扩展能力。用一种更简单的配置方法、更全面的插件扩展支持来为打造前端工程方案提供助力;
FIS3 面向前端的工程构建系统,解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。
FIS3 提出了这样一种配置方式,它就像是 CSS 一样后面书写的规则会覆盖前面前面书写的规则,像 CSS 有一些固定的规则供用户设置;文件分配到的属性,将会在编译阶段决定此文件将如何处理。
当我们要完成这样一些事情
除了某些 js 文件 exclude.js
以外,其他的 js 文件都进行压缩。
// vi fis-conf.js fis.match('*.js', { optimizer: fis.plugin('uglify-js') }); fis.match('exclude.js', { optimizer: null });
在开发阶段 js 不做压缩,发布上线时 js 需要压缩。
// vi fis-conf.js fis.match('*.js', { optimizer: fis.plugin('uglify-js') }); fis.media('dev').match('*.js', { optimizer: null });
fis3 release
压缩
fis3 release dev
不压缩
fis.match(selector, props [, important])
给文件分配属性
FIS3 的 核心配置思想 是通过 给文件分配属性 来控制工具对文件的处理,比如压缩、异构语言的解析、资源依赖的收集、代码检查等;
FIS3 重新梳理了流程,文件在 FIS3 中编译都由用户指定的插件完成,包括合并、压缩优化以及对异构语言的解析等。这一切都由你自己掌控。
fis.match('*.less', { parser: fis.plugin('less') }); fis.match('*.{css,less}', { optimizer: fis.plugin('clean-css') });
fis.plugin(name [, props])
插件调用接口 FIS3 支持本地 NPM 包的加载,这将意味着你不再需要 npm install -g
安装一个插件到全局包目录,而可以加载本地插件了;这样方便你 插件开发调试 。但为了便于维护,FIS3 建议你最终发布到 NPM 上的插件依然沿用全局安装。
FIS3 对整个编译流程提供诸多事件,方便你做特定化需求;并且推出新的插件类型 hook
, hook
插件会在编译之前做加载,可在其内部绑定一些事件来完成特定的需求,比如相对路径的支持。
watch
功能开启时,修改项目配置文件 fis-conf.js
即时生效,不再需要重启 FIS3 主要是用户易用性和扩展能力的提升,定位是方便那些做前端工程方案的用户能快捷的完成方案定制,我们不期待所有的人都能 拿来即用 ,而我们期待的是 FIS3 真正能使你从 折腾工具 中解放出来,通过几行配置、依靠 FIS 社区能快速解决你遇到的工程问题。