FIS3学习笔记（二）

前言：在之前学习了调试和内置语法后，又根据帮助文档学习了初级使用和中级使用。
高级使用大致了解，需要实际应用才可加深理解。
接下来主要总结接口文档

FIS3帮助文档链接

---

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'});// optimizefis.media('prod')    .match('*.js', {        optimizer: fis.plugin('uglify-js', {            mangle: {                expect: ['require', 'define', 'some string'] //不想被压的            }        })    })    .match('*.css', {        optimizer: fis.plugin('clean-css', {            'keepBreaks': true //保持一个规则一个换行        })    });// packfis.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配置大致思路。