前言:在之前学习了调试和内置语法后,又根据帮助文档学习了初级使用和中级使用。
高级使用大致了解,需要实际应用才可加深理解。
接下来主要总结接口文档
1.命令行
命令行大致有如下这几种:(可根据命令行代码 fis3 -h 查询)
init,release,inspect,install,server
2.配置
FIS3的特性与css很多特性相似,比如
(1)属性覆盖,后面同名属性覆盖前面的同名属性。
(2)还有important和media:
fis.match(selector,operator,important); //第三个参数表示是否为优先级最高
fis.media(mediaName).match(selector,operator);//使用时 release mediaName即可
(3)::”对冒号+“package”/”css”/”image”/”text”/”js”表示对所有文件赋予某属性和属性配置
2.1配置api
- fis.get()和fis.set()分别对全局属性进行设置和获取
- fis.match()和fis.media()是常用api,分别用来:匹配并配置 /设置状态
- fis.plugin()一般用于插件配置的调用
2.2配置属性
全局属性通过 fis.set 设置,通过 fis.get 获取;
内置默认属性:
var DEFAULT_SETTINGS = {
project: {
charset: 'utf8',
md5Length: 7,
md5Connector: '_',
files: ['**'],
ignore: ['node_modules/**', 'output/**', '.git/**', 'fis-conf.js']
},
component: {
skipRoadmapCheck: true,
protocol: 'github',
author: 'fis-components'
},
modules: {
hook: 'components',
packager: 'map'
},
options: {}
};
文件属性
1)基本属性
release
packTo
packOrder
query
id
url
charset
isHtmlLike
isCssLike
isJsLike
useHash
domain
rExt
useMap
isMod
extras
requires
useSameNameRequire
useCache
useCompile
如上为文件的基本属性,一般出现在如下情况:
fis.match('/widget/{*,**/*}.js', {
isMod: true,
release: '/static/$0'
});
2)插件属性
插件属性包括几个插件扩展点以供扩展:
lint//代码检查
parser//文件处理
preprocessor//标准化前处理
standard//标准化处理
postprocessor//标准化后处理
optimizer//优化处理
3)打包阶段属性
打包阶段插件设置时必须分配给所有文件,设置时必须 match ::package,不然不做处理。
fis.match('::package', {
packager: fis.plugin('map'),
spriter: fis.plugin('csssprites')
});
prepackager//打包预处理
packager//打包
spriter// 打包后cssspriter合并处理
postpackager//打包后处理
deploy//设置发布方式
//deploy举例
fis.match('**', {
deploy: fis.plugin('http-push', {
receiver: 'http://target-host/receiver.php', // 接收端
to: '/home/work/www' // 将部署到服务器的这个目录下
})
})
2.3FIS3常用配置
2.3.1制定目录规范
源码目录规范
.
├── page
│ └── index.html
├── static
│ └── lib
├── test
└── widget
├── header
├── nav
└── ui
page 放置页面模板
widget 一切组件,包括模板、css、js、图片以及其他前端资源
test 一些测试数据、用例
static 放一些组件公用的静态资源
static/lib 放置一些公共库,例如 jquery, zepto, lazyload 等
编译产出时,产出结果目录
.
├── static
├── template
└── test
static 所有的静态资源都放到这个目录下
template 所有的模板都放到这个目录下
test 还是一些测试数据、用例
//如何编辑fis-con.js使得按上述要求输出,同时上线情形进行代码优化
// 所有的文件产出到 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'
});
// optimize
fis.media('prod')
.match('*.js', {
optimizer: fis.plugin('uglify-js', {
mangle: {
expect: ['require', 'define', 'some string'] //不想被压的
}
})
})
.match('*.css', {
optimizer: fis.plugin('clean-css', {
'keepBreaks': true //保持一个规则一个换行
})
});
// pack
fis.media('prod')
// 启用打包插件,必须匹配 ::package
.match('::package', {
packager: fis.plugin('map'),
spriter: fis.plugin('csssprites', {
layout: 'matrix',
margin: '15'
})
})
.match('*.js', {
packTo: '/static/all_others.js'
})
.match('*.css', {
packTo: '/staitc/all_others.css'
})
.match('/widget/**/*.js', {
packTo: '/static/all_comp.js'
})
.match('/widget/**/*.css', {
packTo: '/static/all_comp.css'
});
通过这一实例可了解fis配置大致思路。