1.起步
1.1. 前端语言缺少三种的语言能力:
- 资源定位的能力:使用开发路径进行资源定位,项目发布后转换成部署路径
- 依赖声明的能力:声明一个资源依赖另一个资源的能力
资源嵌入的能力:把一个资源的编译内容嵌入到另一个文件中
fis基本上在完善前端语言所缺少三种的语言能力
1.2. 命令集合
fis3 release -d [path]
//发布fis3 release -wL
//调试fis3 inspect
//查看文件命中属性的情况fis3 server [open|start]
//调试fis3 init
//初始化fis3 install
//安装由fis-components提供的组件
1.3. 配置
默认配置文件为 fis-conf.js,FIS3 编译的整个流程都是通过配置来控制的。FIS3 定义了一种类似 CSS 的配置方式。固化了构建流程,以期让工程构建变得简单。
配置接口
fis.set(key, value)
fis.get(key)
fis.match(selector, props[, important])
fis.media()
fis.plugin(name [, props [, position]])
获取更多配置参数
- release //设置文件的产出路径
- packTo //分配到这个属性的文件将会合并到这个属性配置的文件中
- packOrder //用来控制合并时的顺序,值越小越在前面。配合 packTo 一起使用。
- query //指定文件的资源定位路径之后的query,比如’?t=123124132’。
- id //指定文件的资源id。默认是 namespace + subpath 的值
- url //指定文件的资源定位路径,以 / 开头。默认是 release 的值,url可以与发布路径 release 不一致。
- charset //指定文本文件的输出编码。默认是 utf8,可以制定为 gbk 或 gb2312等。
- isHtmlLike //指定对文件进行 html 相关语言能力处理
- isCssLike //指定对文件进行 css 相关语言能力处理
- isJsLike //指定对文件进行 js 相关语言能力处理
- useHash //文件是否携带 md5 戳
- domain //给文件 URL 设置 domain 信息
- rExt //设置最终文件产出后的后缀
- useMap //文件信息是否添加到 map.json
- isMod //标示文件是否为组件化文件。
- extras //在[静态资源映射表][]中的附加数据,用于扩展[静态资源映射表][]表的功能
- requires //默认依赖的资源id表
- useSameNameRequire //开启同名依赖
获取更多插件属性
- lint
- parser
- preprocessor
- standard
- postprocessor
- optimizer
- packager
- spriter
- deploy
获取更多
1.4 glob 规则
1.4.1 常用规则
*
匹配多个除了/
以外的字符?
匹配单个除了/
以外的字符**
匹配多个字符包括/
{}
可以让多个规则用 , 逗号分隔,起到或者的作用!
出现在规则的开头,表示取反。即匹配不命中后面规则的文件
1.4.2 特殊用法(类 css 伪类)
::package
用来匹配 fis 的打包过程。::text
用来匹配文本文件。::image
用来匹配文件类型为图片的文件。*.html:js
用来匹配命中的 html 文件中的内嵌的 js 部分。*.html:css
用来匹配命中的 html 文件中内嵌的 css 部分。
1.5 内置插件
fis3 中内嵌了很多常用的插件。
- fis-optimizer-clean-css //用于压缩 css
- fis-optimizer-png-compressor //用来压缩 png 文件
- fis-optimizer-uglify-js //用来压缩 js 文件
- fis-spriter-csssprites //针对 css 规则中的 background-image 做图片优化
- fis3-deploy-local-deliver
- fis3-deploy-http-push
- fis3-hook-components
- fis3-packager-map
2. 工作原理
其中打包处理开了四个扩展点,通过用户配置启用某些插件。
- prepackager 打包前处理插件扩展点
- packager 打包插件扩展点,通过此插件收集文件依赖信息、合并信息产出静态资源映射表
- spriter 图片合并扩展点,如 csssprites
- postpackager 打包后处理插件扩展点
单文件编译流程
- lint 代码校验检查,比较特殊,所以需要 release 命令命令行添加 -l 参数
- parser 预处理阶段,比如 less、sass、es6、react 前端模板等都在此处预编译处理
- preprocessor 标准化前处理插件
- standard 标准化插件,处理内置语法
- postprocessor 标准化后处理插件