內(nèi)地語法

fis是一個編譯器，只有提供了三種編譯能力

1.資源定位
2.內(nèi)能定位
3.依賴申明

在html中嵌入資源

在html中可以嵌入其他文件內(nèi)容或則base64編碼值，可以在資源定位的基礎上，給加上?__inline參數(shù)來標記資源嵌入需求

html圖片嵌入

<img title="百度logo" src="images/logo.gif?__inline"/>

編譯后

<img title="百度logo" src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7"/>

嵌入資源基本就是?__inline

資源定位

在開發(fā)的時候資源可能就發(fā)在本地，然后發(fā)布的時候靜態(tài)資源需要跟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', {
    //發(fā)布到/static/js/xxx目錄下,發(fā)布后會yi
    release : '/static/js$0'
});

// 所有的 css
fis.match('**.css', {
    //發(fā)布到/static/css/xxx目錄下
    release : '/static/css$0'
});

// 所有image目錄下的.png，.gif文件
fis.match('/images/(*.{png,gif})', {
    //發(fā)布到/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 和發(fā)布目錄不一樣。

// 所有的 js
fis.match('**.js', {
    //發(fā)布到/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一樣

依賴申明

提供依賴關(guān)心給編譯器，能夠根據(jù)組件使用情況，按需加載，或則資源所在的的包，從而提升前端頁面的運行能力

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