fis3 学习(2)— Glob

fis.match(selector, props);

selector :FIS3 把匹配文件路径的路径作为selector,使用 node-glob 提供 glob 支持,实现其文件匹配功能。
请参看 Glob 说明

常用的一些用法:

* 匹配0或多个除了 / 以外的字符
? 匹配单个除了 / 以外的字符
** 匹配多个字符包括 /
{} 可以让多个规则用 , 逗号分隔,起到或者的作用
! 出现在规则的开头,表示取反。即匹配不命中后面规则的文件

扩展的规则

假设匹配 widget 目录下以及其子目录下的所有 js 文件,使用 node-glob 需要这么写

widget/{*.js,**/*.js}

这样写起来比较麻烦,所以扩展了这块的语法,以下方式等价于上面的用法

widget/**.js

特殊用法(类 css 伪类)

::package 用来匹配 fis 的打包过程。
::text 用来匹配文本文件。
::image 用来匹配文件类型为图片的文件。
*.html:js 用来匹配命中的 html 文件中的内嵌的 js 部分。
*.html:css 用来匹配命中的 html 文件中内嵌的 css 部分。
*.html:inline-style 用来匹配命中的 html 文件中的内联样式。可以配置些 auto prefix 之类的插件。
*.html:scss 用来命中 html 文件中的 scss 部分

fis3 学习(1)— 介绍、常用命令

fis3是百度fex出品的前端构建工具~
安装及升级:http://fis.baidu.com/fis3/docs/beginning/install.html

原理描述:FIS3 会在配置文件中给文件添加相应属性,用于控制文件的编译、合并等各种操作;文件属性包括基本属性和插件属性。

即在 fis-conf.js (配置文件)中通过匹配规则(类似 CSS 的配置方式),对筛选出的文件进行处理,如(压缩、合并、文件指纹)等,在构建时生效。

配置文件中常用的命令:

fis.match()
语法:fis.match(selector, props);
参数:
selector :FIS3 把匹配文件路径的路径作为selector,匹配到的文件会分配给它设置的 props。
props :编译规则属性,包括文件属性和插件属性。属性列表

fis.media()
fis.media() 接口提供多种状态功能,比如有些配置是仅供开发环境下使用,有些则是仅供生产环境使用的。
例:

fis.media('prod').match('*.js', {
  optimizer: fis.plugin('uglify-js')
});

在目录命令行下使用 fis3 release ,此处为 prod

命令行中常用的命令

fis3 release
语法:fis3 release [media name]
参数:
-h, –help 帮助信息,明此命令有哪些参数并且起到什么作用
-d, –dest 编译产出到一个特定的目录
-l, –lint 启用文件格式检测
-w, –watch 会启动文件监听功能,当文件变化时会编译发布变化了的文件以及依赖它的文件
-L, –live 启动 livereload 功能,应该跟 watch 功能一起使用(-w 在开启 liveload 的前提下,自动开启),当某文档做了修改时,会自动刷新页面。
-c, –clean 清除编译缓存
-u, –unique 启用独立缓存,一般用于编译机

示例:

//构建发布到项目目录的 output 目录下
fis3 release -d ./output

//构建发布到项目父级目录的 dist 子目录下
fis3 release -d ../dist

//浏览器自动刷新
fis3 release -wL

fis3 server
FIS3 内置了一个 Web Server 提供给构建后的代码进行调试。
语法:server [options]
命令:
start 启动服务器
stop 关闭服务器
restart 重启服务器
info 输入服务器信息
open 打开目录
clean 清除目录文件
install install server framework

参考:
http://fis.baidu.com/fis3/docs/api/command.html