fis3的简单使用

fis3的教程官网：http://fis.baidu.com/fis3/docs/beginning/intro.html

FIS3 是什么

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。

基本配置(fis-conf.js):

//打包配置
fis.match('::package', {
postpackager: fis.plugin('loader', {
//allInOne: true,
processor: {
".jade": "html",    //预编译把jade模板当成是Html，这样在资源定位上会替换成功，不然资源定位会失效
".html": "html"
}
}), //打包载入资源配置
spriter: fis.plugin("csssprites", {
//使用矩阵排列方式，默认为线性`linear`
layout: 'matrix',
scale: 1,
margin: 10
})  //打包阶段设置合并雪碧图
});

// 加 md5

fis.match('*.{js,css,png}', { useHash: true });

// 启用 fis-spriter-csssprites 插件

fis.match('::package', { spriter: fis.plugin('csssprites') })

// 对 CSS 进行图片合并

fis.match('*.css', { // 给匹配到的文件分配属性 `useSprite` useSprite: true });

fis.match('*.js', { // fis-optimizer-uglify-js 插件进行压缩，已内置

optimizer: fis.plugin('uglify-js') });

fis.match('*.css', { // fis-optimizer-clean-css 插件进行压缩，已内置

optimizer: fis.plugin('clean-css') });

fis.match('*.png', { // fis-optimizer-png-compressor 插件进行压缩，已内置

optimizer: fis.plugin('png-compressor') });

所需要的FIS插件

fis3-hook-relative --FIS所采用的编译后资源都是用绝对定位的，如果要想资源使用相对定位呢，可以安装此插件

fis.hook("relative"); //使用资源相对定位插件
fis.match("**", {
relative: true
});

fis-parser-jade --jade模板编译插件

fis.match("**.jade", {
　　parser: fis.plugin("jade", {

　　pretty: false
　　}),
　　rExt: ".html"

});

fis-parser-sass --sass编译插件

fis.match("**.scss", {

　　parser: fis.plugin('sass'),

　　rExt: ".css"

});

......补充