fis3基本知识点

fis3属于前端构建工具。解决前端工程中性能优化、资源加载、模块开发、自动化开发、开发规范、代码部署。

安装

安装以及重新安装： npm install -g fis3 更新： npm update -g fis3

资源定位

能有效分离开发路径与部署路径（相对路径转成开发路径）。

资源加CND domain:

fis.media('prod')
.match('/Public/js/module-pkg.js', {
    useHash : true,
    domain : 'http://www.yousi.com'
});

需要特别注意的是，domain的值只能为域名，不能为ip.

配置文件

fis.match(selectot, props)。 selector是匹配文件路径，props是编译规则属性。

props属性

props的全局属性通过fis.set设置，fis.get获取。

全局属性

fis.set('project.charset', 'gbk') 项目产出的编码
fis.set('project.md5Length', 8)设定md5戳。
fis.set('project.md5Connector', '.')设置md5与文件的连字符
fis.set('project.files', ['*.html'])项目源码文件过滤器
fis.set('project.ignore', ['*.bak'])排除某些文件
fis.set('project.fileType.text', 'tpl,js,css')追加fis处理文本后缀列表（添加后，tpl/js/css格式的文件也会被处理）
fis.set('project.fileType.image', 'swf,cur')追加图片处理后缀

文件属性

release 设置产出路径，若设置 false 则表示不产出。
packTo分配到这个文件的属性将合并到packTo属性中（但是产出的文件路径，会受到fis.match规则的影响）

fis.match('/widget/*.js', { packTo : '/statis/pkg.js' }) fis.match('/statis/pkg.js', { useHash : true, release : '/statis/\${namespace}/pkg.js', //namespace 这个变量，是fis设置全局属性获得 fis.set('namespace', 'home'); url : '/statis/new/${namespace}/pkg.js' })

packOrder 控制文件的合并顺序，默认为0，值越小则顺序越靠前，可为负数
query添加文件路径后的query

fis.set('new date', Date.now()); fis.match('*.js', { query:'?=t' + fis.get('new date') })
id文件资源id

fis.match('jquert.js', { id : 'jquery', idMod : true })

使用的时候：var $ = require('jquery');
moduleId文件资源的模块id。fis-hook-module自动包裹define时候用到。默认是使用 id值 fis.match('statis.js', { id : 'a', moduleId : 'a', isMod : true }) exports.a = 10 //编译前 define('a', function (requrie, exports, module){ exports.a = 10 })
url设置文件的资源定位路径
charset文件文件的输出编码
isHtmlLike 匹配到的文件以html进行处理 fis.match('*.hbs', { //hbs格式文件处理 isHtmlLike : true })
isCssLike
isJsLike
useHash 文件带md5戳
domain 给文件设置domain
rExt设置最终文件产出的后缀 fis.match('*.less', { rExt : '.css' })
useMap 文件信息是否添加到map.json（js/css默认加入了静态资源表） fis.match('logo.png', { useMap:true })
isMod 文件是否组件化
extras 静态资源表中附件数据，用于扩展
requires 默认依赖的资源id表 fis.match('/statis/*.js', { requires : [ 'lib/jquery.js' ] })
useSameNameRequire 开启同名依赖。默认为false,为true时，模板会依赖同名的css/js; js会依赖同名css

插件属性

lint 启动插件进行代码检查 fis.match('*.js', { lint : fis.plugin('js', { //插件 }) })
parser 启动parser插件对文件进行处理 fis.match('*sass', { parser : fis.plugin('sass'), rExt : '.css' })
preprocessor 标准化前进行处理
standard 自动以标准化
postprocessor 标准化处理
optimizer 启用优化处理插件
：：package 打包阶段设置时插件 fis.match('::package', { prepackager : fis.plugin('plugin-name'), //预处理阶段 packager : fis.plugin('map'), //打包阶段 postpackger : fis.plugin('plugin-name'), //打包后处理插件 spriter : fis.plugin('csssprites') })

fis配置规则

fis的配置是覆盖的。比如一个文件同时命中规则A和B，A在B前面，那么规则B就会覆盖规则A。

fis.match('*', { //A 
    release : '/dist/$0'
})

fis.match('test.js', { //B
    useHash : true,
    release : '/dist/js/$0'
})

那么最后test.js分配到的属性：

{
    useHash : true,
    release : '/dist/js/$0'
}

fis.media()

可以根据根据开发与发布的不同配置不同的属性。

fis.match('*', {
    useHash : false
})

fis.media('debug').match('*', {
    useHash : false
})

fis.media('prod').match('*', {
    useHash : true
})

如果运行：fis3 release 或者 fis3 release debug，则不会添加指纹。如果运行：fis3 release prod则会使用文件指纹。

因此，这样的配置方式可以一份配置，可以发布到多个远端机器。

fis.media('rd').match('*', {
    deploy : fis.plugin('http-push'， {
        receiver : 'htpp://remote-rd-host/receiver.php',
        to : '/home/work/htdocs' //部署机器的路径
    })
})

fis.media('qa').match('*', {
    deploy : fis.plugin('http-push', {
        receiver : 'http://remote-qa-host/receiver.php',
        to : '/home/work/htdocs' //部署机器的路径
    })
})

fis3 release rd发布到RD的远端机器。 fis3 release qa发布到QA的远端机器。



fis3默认使用http上传代码。但是需要在部署机器上的的web根目录部署接收脚本（php和node）。


fis3 release 产出本地测试服务器（可以通过fis3 server open来打开）。


设置本地发布目录可以有两种方式：
fis3 release -d /users/web  //方式一

fis.match('*', {
    deploy : fis.plugin('local-deliver', {
        to : '/users/web'
    })
})
fis3 release  //根据上面的配置，直接fis3 release 就可以发布到本地

查看
fis3 inspect可以查看文件配置的属性。

文件指纹
fis.match('*.{js,css,png}', {
    useHash : true
})

压缩资源
fis.match('*.js', {
    optimizer : fis.plugin('uglify-js') //压缩js
})
fis.match('*.css', {
    optimizer : fis.plugin('clean-css') //压缩css
})
fis.match('*.png', {
    optimizer : fis.plugin('png-compressor') //压缩png
})

图片合并
`li{
    background : url('/lib/1.png?__sprite');
}
fis.match('::package', { //启动插件
    spriter : fis.plugin('csssprites')
})
fis.match('*.css', {
    useSprite : true //css进行图片合并
})
`

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

fis3 release debug开发的时候关闭合并、hash、压缩

目录
fis3 server open //打开默认目录
fis3 sever sart //启动本地服务器 默认端口 8080
fis3 server -h //查看更多参数
fis3 release -w //监听
fis3 release -L //自动刷新

html资源定位


资源定位可以有效分离开发路径与部署路径，可以通过url改变来该百年资源路径

<img src='/images/logo.gif'>
<img src='/images/logo_74e5229'>

js中定位资源
    js中，可以使用编译函数__uri(path)来定位资源
    var img = __uri('logo.gif');
    var img = '/logo_74e5229.gif'
    var img = __uri('demo.css');
    var img = '/demo_7defa32.css'

css中资源定位
@import url('demo.css');
@import url('/demo_73defa3.css');

html嵌入资源
    嵌入资源，通过?__inline来标记资源嵌入需求
<img src='/images/logo.gif__inline' >
<img src='data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7'>

<link rel='stylesheet' type='text/css' href='demo.css?__inline'>
<style>img{border:4px solid 1px}</style>

<script src='demo.js?__inline'></script>
<script>console.log('inline file')</script>

<link rel='import' href='demo.html?__inline'>
<h1>demo.html content</h1>

js中嵌入资源
__inline('demo.js')
console.log('demo.js content')

var img = __inline('logo.gif')
var img = 'data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7'

var css = __inline('a.css');
var css = 'body \n{color:red;\n}'

css中嵌入资源
@import url {'demo.css?__inline'}
img {border : 5px solid 1px}

.style{
    background : url(image/logo.gif?__inline);
}
.style{
    background : url(data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7);
}

PS


以上是fis3的基本配置与知识点。只能用来做些基本的开发，若进行中级使用、高级使用还需要再仔细学习。



  
    Written on September 12, 2015