fis 内置语法

内地语法

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 */