/fis3-learn

learn how to use fis3

Primary LanguageCSS

安装

  1. 首先安装NodeJS
  2. 安装fis3
npm install -g fis3
  1. 查看是否安装成功:
fis3 -v
  1. 升级
npm update -g fis3

工作流

workflow

入门

官方案例 在根目录下有一个fis-conf.js的配置文件,通常该文件所在的目录即是项目的根目录; 构建:

fis3 release -d ./output

内置服务器

打开内置服务器根目录

fis3 server open 

全局配置

参考

var DEFAULT_SETTINGS = {
  project: {
    charset: 'utf8',    //字符编码,@param: string
    md5Length: 7,    //md5长度, @param: number
    md5Connector: '_',    //设置md5与文件的连接字符,@param: string
    files: ['**'],    //设置项目源码文件过滤器,@param:
    ignore: ['node_modules/**', 'output/**', '.git/**', 'fis-conf.js']    //排除某些不处理的文件
  },    // project的属性也可以通过 fis.set('project.charset', 'utf8') 来设置,其它的类似
  component: {
    skipRoadmapCheck: true,  
    protocol: 'github',
    author: 'fis-components'
  },
  modules: {
    hook: 'components',
    packager: 'map'
  },
  options: {}
};

文件属性

属性 描述 示例
release 文件产出路径,该值可设为false,表示不产出 release:'/js/$0'
packTo 分配文件合并到这个属性配置的文件中 packTo: '/js/package.js'
parkOrder 控制合并时的顺序,值越小越在前面。配合 packTo 一起使用 packOrder: -100
query 文件资源定位路径之后的query,比如'/css.css?=t14504902700' query: '?=t' + fis.get('new date')
使用前先设置new date fis.set('new date', Date.now());
id 设定文件的资源id id: 'jquery',
使用 var $ = require('jquery');
moduleId 指定文件资源的模块id,插件fis3-hook-module里define会用到 moduleId: 'a'
编译前 exports.a = 10
编译后 define('a',function(require,exports,module){exports.a = 10})
url 指定文件的资源定位路径,以/开头, release: '/static/$0',url: '/static/new_project/$0'
chaset 指定文本文件的输出编码,默认是 utf8 charset: 'gbk'
useHash 文件是否携带 md5 戳 useHash: true
useSprite 合并css雪碧图,使用方法 useSprite: true
domain 给文件 URL 设置 domain 信息 domain: 'http://cdn.baidu.com/'
rExt 设置最终文件产出后的后缀 rExt: '.sass'
useMap 文件信息是否添加到 map.json useMap: true
isMod 标示文件是否为组件化文件 isMod:'true'
extras 在[静态资源映射表][]中的附加数据,用于扩展[静态资源映射表][]表的功能 extras:{ isPage: true }
requires 默认依赖的资源id表 requires:[ 'static/lib/jquery.js' ]
useSameNameRequire 开启同名依赖,模板会依赖同名css、js;js 会依赖同名 css,不需要显式引用 useSameNameRequire: true
isJsLike 指定对文件进行 js 相关语言能力处理,值类型:bool
isCssLike 指定对文件进行 css 相关语言能力处理,值类型:bool
isHtmlLike 指定对文件进行 html 相关语言能力处理,值类型:string

资源定位

把资源的相对路径在发布之后变换为绝对路径(部署路径)

  • 三个参数 domain url release
  • 最终路径: domain+url
  • release 是在磁盘上的真实物理路径

配置方法

对比CSS
fis.match(selector,props); 
  • selector:选择器,语法参考 glob

* 匹配0或多个除了 / 以外的字符

? 匹配单个 除了 /以外的字符

** 匹配多个字符包括 /

{} 可以让多个规则用,逗号分隔,起到或者的作用

! 出现在规则的开头,表示取反。即匹配不命中后面规则的文件

条件分组 $0 $1 $2

$0 代表的是 match 到的整个字符串

$1 $2代表相应的捕获分组

fis.match('/a/(**.js)', {
	 release: '/b/$1' // $1 代表 (**.js) 匹配的内容
});
fis.match('/a/(**.js)', {
	 release: '/b/$0' // $0 代表 /a/(**.js) 匹配的内容
});
  • props: 配置的规则属性;具有覆盖特性,即对同一个文件应用相同的规则属性,后面应用的会覆盖前面的

配置环境

对比CSS 媒体查询
fis.media()
  • 默认参数为dev

属性检查

类似与谷歌开发人员工具的元素选择,直观地看到文件都应用哪些规则属性

fis3 inspect --files app_editor2.js

-结果:

 ~ /less/styles.less
 -- release /static/less/styles.css `*`   (0th)
 -- parser [plugin `less`] `/less/**.less`   (1th)
 -- rExt .css `/less/**.less`   (1th)
 -- optimizer [plugin `clean-css`] `*.{less,css}`   (3th)

其中 0th , 1th 表示的是fis-conf.js里面的第几个match匹配规则

文件指纹 useHash

fis.match('*.{png,css,js}',{
    useHash:true//对匹配文件进行MD5戳配置
});

资源压缩

  • 规则属性中的“插件属性optimizer”来完成
 optimizer:fis.plugin('png-compressor');
  • 常用的插件属性有uglify-jsclean-csspng- compressor等等。以上列出的都是fis3内置的插件,无需安装。

三不要:

fis.media('debug').match('*.{js,css,png}', {
    useHash: false,
    useSprite: false,
    optimizer: null
});

打包

默认插件: fis3-packager-map

fis3-packager-map

文件监听

fis3 release -w
  • 浏览器自动刷新
fis3 release -wL 

模块化开化

发布

张云龙的前端工程日记