内地语法
fis是一个编译器，只有提供了三种编译能力
1.资源定位
2.内能定位
3.依赖申明
在html中嵌入资源
在html中可以嵌入其他文件内容或则base64编码值，可以在资源定位的基础上，给加上?__inline参数来标记资源嵌入需求
html图片嵌入
<img title="百度logo" src="images/logo.gif?__inline"/>
编译后
<img title="百度logo" src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7"/>
嵌入资源基本就是?__inline
资源定位
在开发的时候资源可能就发在本地，然后发布的时候静态资源需要跟html要分离，而fis提供了很好资源定位。
<!--源码：<img title="百度logo" src="images/logo.gif"/>编译后-->
<img title="百度logo" src="/images/logo_74e5229.gif"/>
<!--源码：<link rel="stylesheet" type="text/css" href="demo.css">编译后-->
<link rel="stylesheet" type="text/css" href="/demo_7defa41.css">
<!--源码：<script type="text/javascript" src="demo.js"></script>编译后-->
<script type="text/javascript" src="/demo_33c5143.js"></script>
fis.match('*.{js,css,png,gif}', {
useHash: true // 开启 md5 戳
});
// 所有的 js
fis.match('**.js', {
//发布到/static/js/xxx目录下,发布后会yi
release : '/static/js$0'
});
// 所有的 css
fis.match('**.css', {
//发布到/static/css/xxx目录下
release : '/static/css$0'
});
// 所有image目录下的.png，.gif文件
fis.match('/images/(*.{png,gif})', {
//发布到/static/pic/xxx目录下
release: '/static/pic/$1$2'
});
编译后
<!--源码：
<img title="百度logo" src="images/logo.gif"/>
编译后-->
<img title="百度logo" src="/static/pic/logo_74e5229.gif"/>
<!--源码：
<link rel="stylesheet" type="text/css" href="demo.css">
编译后-->
<link rel="stylesheet" type="text/css" href="/static/css/demo_7defa41.css">
<!--源码：
<script type="text/javascript" src="demo.js"></script>
编译后-->
<script type="text/javascript" src="/static/js/demo_33c5143.js"></script>
我们还可以让url 和发布目录不一样。
// 所有的 js
fis.match('**.js', {
//发布到/static/js/xxx目录下
release : '/static/js$0',
//访问url是/mm/static/js/xxx
url : '/mm/static/js$0'
});
<script type="text/javascript" src="/mm/static/js/demo_33c5143.js"></script>
在js中定位资源
var img = __url('images/logo.gif');
var img = '/images/logo_74e5229.gif';
路径也会改变，这样就不用手动去改任何配置文件。
在css中定位资源。
基本跟html一样
依赖申明
提供依赖关心给编译器，能够根据组件使用情况，按需加载，或则资源所在的的包，从而提升前端页面的运行能力
在html中声明依赖
<!--
@require demo.js
@require "demo.css"
-->
如果你想将html文件加入表中，需要对通过配置useMap让html文件加入manifest.json
// fis-conf.js
fis.match('*.html', {
useMap: true
});
fis.match('*.{js,css}', {
// 开启 hash
useHash: true
});
查看output目录下的mainifest.json文件，则可看到：
{
"res" : {
"demo.css" : {
"uri" : "/static/css/demo_7defa41.css",
"type" : "css"
},
"demo.js" : {
"uri" : "/static/js/demo_33c5143.js",
"type" : "js",
"deps" : [ "demo.css" ]
},
"index.html" : {
"uri" : "/index.html",
"type" : "html",
"deps" : [ "demo.js", "demo.css" ]
}
},
"pkg" : {}
}
在js中申明依赖
/** * @require demo.css * @require list.js */
