You can clone with HTTPS, SSH, or Subversion.
Clone in Desktop Download ZIPF.I.S可以支持从最简单的前端开发到大规模大团队项目开发,因此允许用户以 零配置 开始使用F.I.S,于此同时经过适当配置和扩展,F.I.S还能展现其强大的开发支持能力,足以应对大型商业产品开发需求。
不使用任何配置,fis将支持:
以上功能可满足传统前端开发所需的基本要求
在项目目录下新建一个 fis-conf.js 文件,我们可以对fis的编译系统做各种定制化配置。配置fis系统的接口是:
fis.config.set(key, value);
或者
fis.config.merge({...});
由于fis自动化工具采用nodejs作为平台,因此其配置文件也是js书写的。fis变量是全局注册,config属性是fis系统的配置对象实例,merge或set方法用以合并配置数据。
由于fis系统是完全插件化的,因此fis.config对象会有一些内置配置用以为用户提供零配置下的基本功能,所以配置文件中使用fis.config.merge
或者 fis.config.set
接口来追加用户配置。而内部初始化的配置数是:
fis.config.init({
project : {
charset : 'utf8',
md5Length : 7
}
});
string
用法:在项目的fis-conf.js里可以覆盖为
fis.config.set('project.charset', 'gbk');
或者
fis.config.merge({
project : { charset : 'gbk' }
});
number
用法:在项目的fis-conf.js里可以修改为
fis.config.set('project.md5Length', 8);
或者
fis.config.merge({
project : { md5Length : 8 }
});
string
用法:在项目的fis-conf.js里可以修改为
fis.config.set('project.md5Connector ', '.');
或者
fis.config.merge({
project : { md5Connector : '.' }
});
string
| RegExp
用法:在项目的fis-conf.js里可以修改为
fis.config.set('project.include', 'src/**');
或者
fis.config.merge({
project : { include : 'src/**' }
});
project.exclude
则表示在include所命中的文件中排除掉某些文件。string
| RegExp
用法:在项目的fis-conf.js里可以修改为
fis.config.set('project.exclude', /^\/_build\//i);
或者
fis.config.merge({
project : { exclude : /^\/_build\//i }
});
Array
| string
用法:编辑项目的fis-conf.js配置文件
fis.config.set('project.fileType.text', 'tpl, js, css');
或者
fis.config.merge({
project : {
fileType : {
text : 'tpl, js, css'
}
}
});
Array
| string
用法:编辑项目的fis-conf.js配置文件
fis.config.set('project.fileType.image', 'swf, cur, ico');
或者
fis.config.merge({
project : {
fileType : {
image : 'swf, cur, ico'
}
}
});
fis系统有非常灵活的插件扩展能力,详细内容请参看 运行原理,插件调用机制,插件扩展点列表等文档。
fis所有的插件配置都支持定义一个 数组或者逗号分隔的字符串序列 来依次处理文件内容。
Object
用法:
//fis-conf.js
fis.config.merge({
modules : {
parser : {
//coffee后缀的文件使用fis-parser-coffee-script插件编译
coffee : 'coffee-script',
//less后缀的文件使用fis-parser-less插件编译
//处理器支持数组,或者逗号分隔的字符串配置
less : ['less'],
//md后缀的文件使用fis-parser-marked插件编译
md : 'marked'
}
},
roadmap : {
ext : {
//less后缀的文件将输出为css后缀
//并且在parser之后的其他处理流程中被当做css文件处理
less : 'css',
//coffee后缀的文件将输出为js文件
//并且在parser之后的其他处理流程中被当做js文件处理
coffee : 'js',
//md后缀的文件将输出为html文件
//并且在parser之后的其他处理流程中被当做html文件处理
md : 'html'
}
}
});
Object
用法:
fis.config.set('modules.preprocessor.css', 'image-set');
或者
//fis-conf.js
fis.config.merge({
modules : {
preprocessor : {
//css后缀文件会经过fis-preprocessor-image-set插件的预处理
css : 'image-set'
}
}
});
Object
javascript
{ js : 'jswrapper' }
Object
用法:
fis.config.set('modules.lint.js', 'jshint');
或者
//fis-conf.js
fis.config.merge({
modules : {
lint : {
//js后缀文件会经过fis-lint-jshint插件的代码校验检查
js : 'jshint'
}
}
});
Object
用法:
fis.config.set('modules.test.js', 'phantomjs');
或者
//fis-conf.js
fis.config.merge({
modules : {
test : {
//js后缀文件会经过fis-test-phantomjs插件的测试
js : 'phantomjs'
}
}
});
Object
javascript
{
js : 'uglify-js',
css : 'clean-css',
png : 'png-compressor'
}
用法:
fis.config.set('modules.optimizer.js', 'uglify-js');
或者
//fis-conf.js
fis.config.merge({
modules : {
optimizer : {
//js后缀文件会经过fis-optimizer-uglify-js插件的压缩优化
js : 'uglify-js'
}
}
});
Array
| string
用法:
fis.config.set('modules.prepackager', 'oo, xx');
或者
//fis-conf.js
fis.config.merge({
modules : {
//打包前调用fis-prepackager-oo和fis-prepackager-xx插件进行处理
prepackager : 'oo, xx'
}
});
Array
| string
fis-packager-map
,生成 map.json 文件用法:
fis.config.set('modules.packager', 'your_packager');
或者
//fis-conf.js
fis.config.merge({
modules : {
//打包调用fis-packager-your_packager插件进行处理
packager : 'your_packager'
}
});
Array
| string
fis-spriter-csssprites
,支持自动css打包用法:
fis.config.set('modules.spriter', 'your_spriter');
或者
//fis-conf.js
fis.config.merge({
modules : {
//打包后调用fis-spriter-your_spriter插件进行css sprites化处理
spriter : 'your_spriter'
}
});
Array
| string
用法:
fis.config.set('modules.postpackager', 'your_postpackager');
或者
//fis-conf.js
fis.config.merge({
modules : {
//打包后调用fis-postpackager-your_postpackager插件进行处理
postpackager : 'your_postpackager'
}
});
Object
用法:
fis.config.set('settings.optimizer.uglify-js.output.max_line_len', 500);
fis.config.set('settings.optimizer.clean-css.keepBreaks', true);
或者
//fis-conf.js
fis.config.merge({
settings : {
optimizer : {
//fis-optimizer-uglify-js插件的配置数据
'uglify-js' : {
output : {
max_line_len : 500
}
},
//fis-optimizer-clean-css插件的配置数据
'clean-css' : {
keepBreaks : true
}
}
}
});
Object
用法:
fis.config.set('settings.postprocessor.jswrapper.template', 'try{ ${content} }catch(e){e.message+="${id}";throw e;}');
或者
fis.config.merge({
settings : {
postprocessor : {
jswrapper : {
template : 'try{ ${content} }catch(e){ e.message += "${id}"; throw e; }'
}
}
}
});
Object
用法:
//配置字符串全部转换为ascii字符
fis.config.set('settings.optimizer.uglify-js.output.ascii_only', true);
或者
//配置字符串全部转换为ascii字符
fis.config.merge({
settings : {
optimizer : {
'uglify-js' : {
output : {
ascii_only : true
}
}
}
}
});
settings.optimizer.clean-css
配置节点的数据传递给压缩器,因此,这里的配置完全等价于clean-css的运行配置。Object
用法:
//配置压缩css时保留换行
fis.config.set('settings.optimizer.clean-css.keepBreaks', true);
或者
//配置压缩css时保留换行
fis.config.merge({
settings : {
optimizer : {
'clean-css' : {
keepBreaks : true
}
}
}
});
pngquant
和 pngcrush
两个优秀的png图片压缩工具移植为nodejs的原生扩展(node-pngcrush与node-pngquant-native),相比同类型工具采用进程调用的方式更高性能,压缩速度更快。Object
type
:选择压缩器类型,默认是 'pngcrush',可选值为 'pngquant',pngquant会将所有 png24
的图片压缩为 png8
,压缩率极高,但alpha通道信息会有损失。用法:
//使用pngquant进行压缩,png图片压缩后均为png8
fis.config.set('settings.optimizer.png-compressor.type', 'pngquant');
或者
//使用pngquant进行压缩,png图片压缩后均为png8
fis.config.merge({
settings : {
optimizer : {
'png-compressor' : {
type : 'pngquant'
}
}
}
});
Object
默认值:
{
margin : 3,
layout : 'linear',
width_limit : 10240,
height_limit : 10240
}
选项:
margin
:图之间的边距,单位像素。layout
:布局算法,默认是 'linear',图片垂直布局,水平方向无需 遮盖处理
。可选项还有 matrix
,图片矩阵布局,面积最小化,但需要提供额外的dom控制水平方向图片的遮盖处理-p
或者 --pack
参数。由于csssprite处理需要消耗一定的计算资源,并且开发过程中并不需要时刻做图片合并,因此fis将其定义为打包处理流程,启动csssprite处理需要指定--pack参数。useSprite
属性标记为 true
的文件才会进行csssprite处理,因此请合理安排要进行csssprite处理的文件,尽量对合并后的文件做处理。?__sprite
这个query标记就可以使用csssprite了。详情请参考fis-spriter-csssprites插件的 使用文档。用法:
//使用矩阵布局
fis.config.set('settings.spriter.csssprites.layout', 'matrix');
或者
//使用矩阵布局
fis.config.merge({
settings : {
spriter : {
csssprites : {
layout : 'matrix'
}
}
}
});
Array
reg
:用于匹配文件路径的正则(RegExp)或通配(String)。文件路径是相对项目根目录的路径,以 /
开头。release
:设置文件的产出路径。默认是文件相对项目根目录的路径,以 /
开头。该值可以设置为 false
,表示为不产出(unreleasable)文件。url
:指定文件的资源定位路径,以 /
开头。默认是 release
的值,url可以与发布路径 release
不一致。query
:指定文件的资源定位路径之后的query,比如'?t=123124132'。id
:指定文件的资源id。默认是 namespace
+ subpath
的值。charset
:指定文本文件的输出编码。默认是 utf8
,可以制定为 gbk
或 gb2312
等。isHtmlLike
:指定对文件进行html相关的 语言能力扩展
isJsLike
:指定对文件进行js相关的 语言能力扩展
isCssLike
:指定对文件进行css相关的 语言能力扩展
useCompile
:指定文件是否经过fis的编译处理,如果为false,则该文件不会做任何编译处理。useHash
:指定文件产出后是否添加md5戳。默认只有js、css、图片文件会添加。useDomain
:指定文件引用处是否添加域名。useCache
:指定文件编译过程中是否创建缓存,默认值是 true
。useMap
:指定fis在打包阶段是否将文件加入到map.json中索引。默认只有isJsLike、isCssLike、isMod的文件会加入表中useParser
:指定文件是否经过parser插件处理。默认为true,值为 false
时才会关闭。usePreprocessor
:指定文件是否经过preprocessor插件处理。默认为true,值为 false
时才会关闭。useStandard
:指定文件是否经过内置的三种语言标准化流程处理。默认为true,值为 false
时才会关闭。usePostprocessor
:指定文件是否经过postprocessor插件处理。默认为true,值为 false
时才会关闭。useLint
:指定文件是否经过lint插件处理。默认为true,值为 false
时才会关闭。useTest
:指定文件是否经过test插件处理。默认为true,值为 false
时才会关闭。useOptimizer
:指定文件是否经过optimizer插件处理useSprite
:指定文件是否进行csssprite处理。默认是 false
,即不对单个文件进行csssprite操作的,而只对合并后的文件进行。fis release中使用 --pack
参数即可触发csssprite操作。isMod
:标记文件为组件化文件。被标记成组件化的文件会入map.json表。并且会对js文件进行组件化包装。extras
:在map.json中的附加数据,用于扩展map.json表的功能。requires
:默认依赖的资源id表,类型为Array。用法:
fis.config.merge({
roadmap : {
path : [
{
//所有widget目录下的js文件
reg : 'widget/**.js',
//是模块化的js文件(标记为这种值的文件,会进行amd或者闭包包装)
isMod : true,
//默认依赖lib.js
requires : [ 'lib.js' ],
//向产出的map.json文件里附加一些信息
extras : { say : '123' },
//编译后产出到 /static/widget/xxx 目录下
release : '/static$&'
},
{
//所有的js文件
reg : '**.js',
//发布到/static/js/xxx目录下
release : '/static/js$&'
},
{
//所有的ico文件
reg : '**.ico',
//发布的时候即使加了--md5参数也不要生成带md5戳的文件
useHash : false,
//发布到/static/xxx目录下
release : '/static$&'
},
{
//所有image目录下的.png,.gif文件
reg : /^\/images\/(.*\.(?:png|gif))/i,
//访问这些图片的url是 '/m/xxxx?log_id=123'
url : '/m/$1?log_id=123',
//发布到/static/pic/xxx目录下
release : '/static/pic/$1'
},
{
//所有template目录下的.php文件
reg : /^\/template\/(.*\.php)/i,
//是类html文件,会进行html语言能力扩展
isHtmlLike : true,
//发布为gbk编码文件
charset : 'gbk',
//发布到/php/template/xxx目录下
release : '/php/template/$1'
},
{
//前面规则未匹配到的其他文件
reg : /.*/,
//编译的时候不要产出了
release : false
}
]
}
});
Object
用法:
//fis-conf.js
fis.config.merge({
roadmap : {
ext : {
//less后缀的文件将输出为css后缀
//并且在parser之后的其他处理流程中被当做css文件处理
less : 'css',
//coffee后缀的文件将输出为js文件
//并且在parser之后的其他处理流程中被当做js文件处理
coffee : 'js',
//md后缀的文件将输出为html文件
//并且在parser之后的其他处理流程中被当做html文件处理
md : 'html'
}
}
});
Object
| string
用法:
//fis-conf.js
//用法一
fis.config.merge({
roadmap : {
//所有静态资源文件都使用 http://s1.example.com 或者 http://s2.example.com 作为域名
domain : 'http://s1.example.com, http://s2.example.com'
}
});
//用法二
fis.config.merge({
roadmap : {
domain : {
//widget目录下的所有css文件使用 http://css1.example.com 作为域名
'widget/**.css' : 'http://css1.example.com',
//所有的js文件使用 http://js1.example.com 或者 http://js2.example.com 作为域名
'**.js' : ['http://js1.example.com', 'http://js2.example.com']
}
}
});
编译时使用fis release的 --domains
参数来控制是否添加domain
$ fis release --domains --dest ../output
Array
| string
用法:
//fis-conf.js
fis.config.merge({
roadmap : {
domain : {
//所有图片文件,使用 http://img.example.com 作为域名
'image' : ['http://img.example.com']
}
}
});
编译时使用fis release的 --domains
参数来控制是否添加domain
$ fis release --domains --dest ../output
Object
用法:
//fis-conf.js
fis.config.merge({
deploy : {
//使用fis release --dest remote来使用这个配置
remote : {
//如果配置了receiver,fis会把文件逐个post到接收端上
receiver : 'http://www.example.com/path/to/receiver.php',
//从产出的结果的static目录下找文件
from : '/static',
//保存到远端机器的/home/fis/www/static目录下
//这个参数会跟随post请求一起发送
to : '/home/fis/www/',
//通配或正则过滤文件,表示只上传所有的js文件
include : '**.js',
//widget目录下的那些文件就不要发布了
exclude : /\/widget\//i,
//支持对文件进行字符串替换
replace : {
from : 'http://www.online.com',
to : 'http://www.offline.com'
}
},
//名字随便取的,没有特殊含义
local : {
//from参数省略,表示从发布后的根目录开始上传
//发布到当前项目的上一级的output目录中
to : '../output'
},
//也可以是一个数组
remote2 : [
{
//将static目录上传到/home/fis/www/webroot下
//上传文件路径为/home/fis/www/webroot/static/xxxx
receiver : 'http://www.example.com/path/to/receiver.php',
from : '/static',
to : '/home/fis/www/webroot'
},
{
//将template目录内的文件(不包括template一级)
//上传到/home/fis/www/tpl下
//上传文件路径为/home/fis/www/tpl/xxxx
receiver : 'http://www.example.com/path/to/receiver.php',
from : '/template',
to : '/home/fis/www/tpl',
subOnly : true
}
]
}
});
小贴士:--dest参数支持使用逗号(,)分割多个发布配置,比如上面的例子,我们可以使用fis release --dest remote,local,remote2 命令在一次编译中同时发布多个目标。
Object
用法:
//fis-conf.js
fis.config.merge({
pack : {
//打包所有的demo.js, script.js文件
//将内容输出为static/pkg/aio.js文件
'pkg/aio.js' : ['**/demo.js', /\/script\.js$/i],
//打包所有的css文件
//将内容输出为static/pkg/aio.css文件
'pkg/aio.css' : '**.css'
}
});
输出结果:使用命令 fis release --pack --md5 --dest ./output 编译项目,然后到output目录下查看产出的map.json内容得到:
{
"res": {
"demo.css": {
"uri": "/static/css/demo_7defa41.css",
"type": "css",
"pkg": "p1"
},
"demo.js": {
"uri": "/static/js/demo_33c5143.js",
"type": "js",
"deps": [
"demo.css"
],
"pkg": "p0"
},
"index.html": {
"uri": "/index.html",
"type": "html",
"deps": [
"demo.js",
"demo.css"
]
},
"script.js": {
"uri": "/static/js/script_32300bf.js",
"type": "js",
"pkg": "p0"
},
"style.css": {
"uri": "/static/css/style_837b297.css",
"type": "css",
"pkg": "p1"
}
},
"pkg": {
"p0": {
"uri": "/static/pkg/aio_5bb04ef.js",
"type": "js",
"has": [
"demo.js",
"script.js"
],
"deps": [
"demo.css"
]
},
"p1": {
"uri": "/static/pkg/aio_cdf8bd3.css",
"type": "css",
"has": [
"demo.css",
"style.css"
]
}
}
}