FIS 构建工具 前端工具框架
官方文档:http://fis.baidu.com/fis3/docs/beginning/intro.html
默认配置文件为 fis-conf.js,有此文件的目录被看做是项目根目
配置接口
- fis.set(key, value):设置一些配置,如系统内置属性。
- fis.get(key):获取已经配置的属性,和 fis.set() 成对使用
- fis.match(selector, props[, important]):给匹配到的文件分配文件属性。后面分配到的规则会覆盖前面的,若设置了important为 true,即无法被覆盖;
fis.match('::package', { });//packager阶段所有的文件
fis.match('::image', { });// 所有被标注为图片的文件
fis.match('::text', { });//所有被标注为文本的文件
fis.match('::js', { });//匹配模板中的内联 js
fis.match('::css', { });//匹配模板中内联 css
- fis.media(mode):模仿自 css 的 @media,表示不同的状态。意味着有多份配置,每一份配置都可以让 fis3 进行不同的编译
fis.media('dev').match()
//编译发布的时候使用 media
fis3 release <media>
- fis.plugin(name [, props [, position]]):插件调用接口。插件名,插件属性,插件位置
配置属性
全局属性
全局属性通过 fis.set 设置,通过 fis.get 获取
- project.charset:指定项目编译后产出文件的编码。使用 charset 编码需要使用encoding插件发布编译结果。
- project.md5Length:文件MD5戳长度。
- project.md5Connector:设置md5与文件的连字符。
- project.files:设置项目源码文件过滤器。
- project.ignore:排除某些文件。
- project.fileType.text:追加文本文件后缀列表。fis系统在编译时会对文本文件和图片类二进制文件做不同的处理,文件分类依据是后缀名。
- project.fileType.image:追加图片类二进制文件后缀列表。
文件属性
fis3 以文件属性控制文件的编译合并以及各种操作;文件属性包括基本属性和插件属性,插件属性是为了方便在不同的插件扩展点设置插件; ######基本属性
- release:设置文件的产出路径。默认是文件相对项目根目录的路径,以 / 开头。该值可以设置为 false ,表示为不产出(unreleasable)文件。
- packTo:分配到这个属性的文件将会合并到这个属性配置的文件中。packTo 设置的是源码路径,也会受到已经设置的 fis.match 规则的影响
- packOrder:用来控制合并时的顺序,值越小越在前面。配合 packTo 一起使用。
- query:指定文件的资源定位路径之后的query,比如’?t=123124132’。
- id:指定文件的资源id。默认是 namespace + subpath 的值
- moduleId:指定文件资源的模块id。在插件fis3-hook-module里面自动包裹define的时候会用到,默认是 id 的值。
- url:指定文件的资源定位路径,以 / 开头。默认是 release 的值,url可以与发布路径 release 不一致。
- charset:指定文本文件的输出编码。默认是 utf8,可以制定为 gbk 或 gb2312等。使用 charset 编码需要使用encoding插件发布编译结果。
- isHtmlLike:指定对文件进行 html 相关语言能力处理
- isCssLike:指定对文件进行 css 相关的语言能力处理
- isJsLike:指定对文件进行 js 相关的语言能力处理
- useHash:文件是否携带 md5 戳,文件分配到此属性后,其 url 及其产出带 md5 戳
- domain:给文件 URL 设置 domain 信息,如果需要给某些资源添加 cdn,分配到此属性的资源 url 会被添加 domain;
- rExt:设置最终文件产出后的后缀
- useMap:文件信息是否添加到 map.json。分配到此属性的资源出现在静态资源表中,现在对 js、css 等文件默认加入了静态资源表中;
- isMod:标示文件是否为组件化文件。被标记成组件化的文件会入map.json表。并且会对js文件进行组件化包装。
- extras:在[静态资源映射表][]中的附加数据,用于扩展[静态资源映射表][]表的功能。
- requires:默认依赖的资源id表
- useSameNameRequire:开启同名依赖,模板会依赖同名css、js;js 会依赖同名 css,不需要显式引用。
- useCache: 文件是否使用编译缓存。当设置使用编译缓存,每个文件的编译结果均会在磁盘中保存以供下次编译使用。设置为 false 后,则该文件每次均会被编译。
- useCompile: FIS是否对文件进行编译。设置为 false 后文件会通过FIS发布,但是FIS不对文件做任何修改
插件属性
插件属性决定了匹配的文件进行哪些插件的处理 查详表吧
命令行
FIS3 默认内置了命令 release、install、init、server、inspect等命令,都是 FIS fis-command-* 插件提供,调用方法:
fis3 <command>
- release
编译发布一个 FIS3 项目。 -h, --help 打印帮助信息
-d, --dest编译产出到一个特定的目录
-l, --lint 启用文件格式检测
-w, --watch 启动文件监听
-L, --live 启动 livereload 功能
-c, --clean 清除编译缓存
-u, --unique 启用独立缓存 - install
用来从组件平台中下载组件到当前项目中,并自动下载其依赖。
–save save 除了安装组件外,将依赖信息保存在当前项目根目录下 component.json 文件中
-r, --root设置项目根目录 - init
fis3 脚手架工具,用来快速初始化项目。fis3 init ${模板名称} - server
fis3 内置了一个小型 web server, 可以通过 fis3 server start 快速开启。如果一切正常,开启后它将自动弹出浏览器打开 http://127.0.0.1:8080/。
需要说明的是,fis3 自带的 server 默认是通过 java 内嵌 jetty 然后桥接 php-cgi 的方式运行的。所以,要求用户机器上必须安装有 jre 和 php-cgi 程序。
另外, fis server 是后台进行运行的,不会随着进程的结束而停止。如果想停止该服务器,请使用 fis3 server stop 进行关闭。 - inspect
用来查看文件 match 结果。
制定目录规范
源码目录规范
- page 放置页面模板
- widget 一切组件,包括模板、css、js、图片以及其他前端资源
- test 一些测试数据、用例
- static 放一些组件公用的静态资源
- static/lib 放置一些公共库,例如 jquery, zepto, lazyload 等
结果目录规范
- static 所有的静态资源都放到这个目录下
- template 所有的模板都放到这个目录下
- test 还是一些测试数据、用例
// 所有的文件产出到 static/ 目录下
fis.match('*', {
release: '/static/$0'
});
// 所有模板放到 tempalte 目录下
fis.match('*.html', {
release: '/template/$0'
});
// widget源码目录下的资源被标注为组件
fis.match('/widget/**/*', {
isMod: true
});
// widget下的 js 调用 jswrapper 进行自动化组件化封装
fis.match('/widget/**/*.js', {
postprocessor: fis.plugin('jswrapper', {
type: 'commonjs'
})
});
// test 目录下的原封不动产出到 test 目录下
fis.match('/test/**/*', {
release: '$0'
});
glob
简要说明
node-glob 中的使用方式有很多,如果要了解全部,请前往 http://fis.baidu.com/fis3/docs/api/config-glob.html
这里把常用的一些用法做说明。
- *匹配0或多个除了 / 以外的字符
- ? 匹配单个除了 / 以外的字符
- ** 匹配多个字符包括 /
- {} 可以让多个规则用 , 逗号分隔,起到或者的作用
- ! 出现在规则的开头,表示取反。即匹配不命中后面规则的文件
需要注意的是,fis 中的文件路径都是以 / 开头的,所以编写规则时,请尽量严格的以 / 开头。
当设置规则时,没有严格的以 / 开头,比如 a.js, 它匹配的是所有目录下面的 a.js, 包括:/a.js、/a/a.js、/a/b/a.js。 如果要严格只命中根目录下面的 /a.js, 请使用 fis.match(’/a.js’)。
另外 /foo/.js, 只会命中 /foo 目录下面的所有 js 文件,不包含子目录。 而 /foo/**/.js 是命中所有子目录以及其子目录下面的所有 js 文件,不包含当前目录下面的 js 文件。 如果需要命中 foo 目录下面以及所有其子目录下面的 js 文件,请使用 /foo/**.js。