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'
});

// 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配置大致思路。