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"

});

......補充