fis3前端工程構建配置入門教程

 壹 ❀ 引

fis3是百度推出的一款前端工程構建工具，類似的還有webpack，gulp等工具；無論大家有沒有使用過，從事前端行業應該都略知一二了，所以對於此類工具用干嘛的我這里就不做重復了。

其實對於這類構建工具，大部分人是不感興趣，或者說有些畏懼的，配置多賊麻煩，無法像js一樣調試很恐怖，給人感覺很難；特別是fis3這種相對比較冷門的構建工具，出現問題百度一圈相關答案真的很少...

我也曾抱怨公司為啥不用webpack，但我畢竟不是抉擇者，已經決定了使用這個還不如沉下心去學習了解；本文會抽出我覺得常用的，好用的配置，並通過我的理解來加以描述，一定能看得懂，我也會在文章結尾貼上我的項目配置，希望看完基本教程你能看懂，那么本文開始。

 貳 ❀ 簡單配置入門(不難，耐心點看)

fis3編譯流程都是通過配置完成的，我們的配置等於告訴fis3工具應該按怎樣的規則編譯我們的項目，這里說下必用的配置API：

1.fis.set(key,value)

此方法提供了多種key字段，不同的key作用不同，這里只說下key為'project.files'的作用，它能幫我們過濾文件夾。

一個項目文件夾那么多，肯定有一些文件我們並不希望fis3幫我們編譯，比如三方庫node_modules這樣，舉個例子：

fis.set('project.files', ['commonLess/**', 'components/**', 'modules/**', 'pages/**']);

這段代碼的意思是，我希望fis3后續配置只對commonLess，components等文件夾下的所有文件起作用，沒添加的文件夾都被過濾掉了，所以這個方法請寫在配置的第一行，你可以點擊這里查看完整的key說明。

2.fis.hook()

此方法能啟用模塊化開發，為js文件提供模塊化開發的支持；我們可以下載fis3提供的插件並利用hook方法啟用模塊化，fis3提供了三種模塊插件。

我司選擇了commonjs規范，這個需要配合mod.js一起使用，先下載fis3提供的fis3-hook-commonjs插件(mod.js這里就不說怎么用了)

npm install fis3-hook-commonjs

在fis3配置表中添加如下配置就啟用了commonjs規范：

fis.hook('commonjs');

當然單hook還不夠，我們還沒指定哪些文件使用此規范，這個需要下面的match方法指定；這行代碼也請加在fis3配置文件頭部位置，先啟用模塊化，后面再指定哪些文件使用模塊化。

2.fis.match(selector, props)

selector：表示匹配路徑，你希望哪個路徑下的文件被編譯處理，就將此路徑寫在這里，這是fis3提供的匹配語法：

• * 匹配0或多個除了 / 以外的字符
• ? 匹配單個除了 / 以外的字符
• ** 匹配多個字符包括 /
• {} 可以讓多個規則用 , 逗號分隔，起到或者的作用
• ! 出現在規則的開頭，表示取反。即匹配不命中后面規則的文件

props：編譯規則，你希望前面你選擇的路徑下的文件被怎么編譯，這個規則就寫在這里。

fis3大部分配置都是通過match方法實現的，這段請耐心點看：

fis3建議路徑都是以/開頭，/代表根目錄，舉個例子：

fis.match('a.js', {});

這段代碼表示匹配整個項目中的所有a.js文件，包括/a.js     /a/a.js   /a/b/a.js

但如果我們加了斜線，意義就不同了：

fis.match('/a.js', {});

此時表示，只匹配根目錄下的a.js，並不會匹配所有路徑下的a.js。

除此之外，/a/*.js表示只匹配/a目錄下所有的js文件，不包含/a目錄下子目錄中的js，不過我們可以通過這種寫法/a/**.js達到此目的。

說完match匹配路徑的規則，簡單說下match的props屬性，注意，所有的屬性都包裹在一個{}中，這里就主要說下常用的幾個：

release：設置文件的產出路徑

我們按路徑匹配了一些文件，經過某些編譯之后輸出到哪里，這個產出就是由release決定的，例如：

fis.match('*.{png,js,css}', {
  release: '/static/$0'
});

這段代碼的意思是，匹配整個項目中所有的png，js，css類型的文件，並輸出到根目錄下的static文件中；

$0表示match方法的整個selector字段，就像一個變量，匹配到什么，$0就代表什么，那么在這里的意思就是按照文件原名輸出到static目錄下。

 順帶一體，除了$0還有一個$1也很常用，舉個例子：

fis.match('/pages/**/(*.html)', {
    release: '/$1'
});

這段代碼的意思是，將pages目錄下所有html文件按文件原名輸出到根目錄下，前面說了/代表根目錄。此時$1代表(*.html)這一段匹配的所有字段，也就是文件名了。如果是$0就代表/pages/**/(*.html) 這一段，應該不難理解。

isMod：是否啟用模塊化

前面我們通過fis.hook()方法調用了模塊化插件，現在就可以利用isMod屬性指定哪些文件模塊化，比如：

fis.match('*.js', {
    isMod: true,
    release: '/static/$0'
});

這段代碼的意思是，匹配所有的js文件，模塊化，並且輸出到根目錄下static文件中，並按原名顯示。

useHash：文件是否添加md5戳

這個做http緩存會用，給文件添加md5戳便於客戶端主動感知文件變化，如果對於http緩存感興趣，可以閱讀博客這邊文章---http緩存詳解，http緩存推薦方案

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

這段代碼的意思是，匹配所有的css文件，在編譯時全部添加md5戳。

rExt：設置文件編譯后的產出后綴

說直白點，改變文件發布后的文件后綴，比如less,sass文件轉義后我們希望是css格式，那么就可以這樣：

fis.match('*.{less,sass}', {
    rExt: '.css'
});

packTo：設置文件合並后的輸出路徑與文件

這個屬性是合並文件用的，比如我一個頁面用了三個js文件，我想合並成一個js文件，就可以利用這個屬性，舉個例子：

fis.match('/index/**.js', {
    packTo: '/static/pkg_index.js'
});

這段配置的意思是，找到根目錄下index文件下所有js文件，合並發布到根目錄下static文件下的pkg_index.js文件中。

id：指定文件的資源id

這么解釋可能看不懂，直接上個例子：

fis.match('/static/jquery.js', {
    id: 'jquery',
    isMod: true
});
// 引用文件時
var $ = require('jquery');

我們將根目錄下的static文件夾中的jquery.js文件的id設置成了jquery字段，在引用時直接require   id設置的字段就可以了，如果不設置，我們require就是這樣：

var $ = require('/static/jquery.js');

所以id的作用就像指定了一個字段作為key去保存一段復雜的路徑，這樣做的好處是在require時能更加簡單。

其它match屬性暫時沒用到，點擊這里可以查看完整的match屬性

 叄 ❀ 關於發布命令

知道了基本的配置，就要通過發布指令，將我們的項目按照配置發布出去，這里簡單說下發布指令，很簡單：

fis3 release -d <path>

<path>代表任意發布路徑

fis3 release -d ./output

發布到當前項目目錄的outout目錄下

fis3 release -d ../dist

發布到項目父級目錄的dist目錄下

fis3 release -d D:\output

發布到D盤下的output目錄下

除此之外，我們還能在發布指令目錄后添加屬性，比如：

fis3 release -d D:\output -w

-w啟用文件監聽功能，發布后此命令不會退出，而是一直顯示。

fis3 release -d D:\output -wL

-L一般與w一起使用，監聽文件變化，只要修改任何東西，都會自動刷新頁面

fis3 release -d D:\output -wLc

-c表示每次發布清除編譯緩存

關於發布指令path與match屬性release的區別

不知道大家會不會把match release屬性指定輸出路徑和發布指令中指定輸出路徑弄混；實際開發中，發布指令的path決定的是大格局，整個項目要發布到哪，而match release的路徑往往是基於項目路徑后決定個別文件發布到哪，這是有區別的。

 肆 ❀ 常用插件與配置

前面聊的入門的配置規則與發布命令其實只是為了讓你看懂下面這些配置，拷貝到配置中進行發布，如果提示缺少插件，請對應下載對應插件即可：

1.轉義所有less文件，並為css3屬性添加瀏覽器兼容前綴，如果有sass做法也一樣，請下載對應插件：

fis.match('*.less', {
    rExt: '.css',
    parser: fis.plugin('less-2.x', {

    })
}).match('*.{css,less,scss}', {
    preprocessor: fis.plugin('autoprefixer', {
        "browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
        "cascade": true
    })
});

2.壓縮js與css文件，需要下載對應插件

fis.media('prod').match("**.js", {
    //壓縮js
    optimizer: fis.plugin('uglify-js')
});
fis.match('**.{css,less}', {
    //壓縮css
    optimizer: fis.plugin('clean-css')
});

3.單頁面零散資源合並，這個在生產環境需要使用

比如將index頁面的所有js合並成一個js，所有css文件合並成一個css，也需要下載插件

fis.match('::package', {
    postpackager: fis.plugin('loader', {
        //單頁面合並零散資源
        allInOne: true
    })
});

4.為css，js添加md5戳，http緩存必備

fis.match('*.{js,css}', {
    //為js，css類型文件添加md5戳
    useHash: true
})

5.為所有圖片添加md5戳

fis.match('::image', {
    //為所有的圖片類型添加md5戳
    useHash: true
});

 伍 ❀ 我的前端項目完整配置

// 過濾文件，只有數組中的目錄才會被fis3編譯
fis.set('project.files', ['bootstrap/**', 'commonLess/**', 'components/**', 'modules/**', 'pages/**', 'partials/**']);

//啟用relative插件,所有文件使用相對路徑
fis.hook('relative')
    .match('**', {
        relative: true
    });

// commonJS規范
fis.hook('commonjs');

//將pages下所有html按原文件名發布至根目錄
fis.match('/pages/**/(*.html)', {
    release: '/$1',
    isMod: true,
});

//為js文件啟用模塊化
fis.match('{modules,pages,partials,components}/(**.js)', {
    isMod: true
});

//less轉義css,並添加瀏覽器前綴
fis.match('**/*.less', {
    rExt: '.css',
    parser: fis.plugin('less-2.x', {

    })
}).match('*.{css,less,scss}', {
    preprocessor: fis.plugin('autoprefixer', {
        "browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
        "cascade": true
    })
});

//使用postcss，並使用pxtoviewport插件
var pxtoviewport = require('postcss-px-to-viewport');
fis.match('*.{css,less,scss}', {
    postprocessor: fis.plugin('postcss', {
        processConfig: {},
        plugins: [pxtoviewport],
        sourceMap: true,
        sourceMapRelative: false
    })
});

fis.match('::packager', {
    postpackager: fis.plugin('loader', {
        resourceType: 'mod',
        useInlineMap: true // 資源映射表內嵌
    })
});


//生產環境配置，相比測試環境，多了代碼合並壓縮，添加時間戳等操作。
fis.media('prod').match("**.js", {
        //壓縮js
        optimizer: fis.plugin('uglify-js')
    }).match('**.{css,less}', {
        //壓縮css
        optimizer: fis.plugin('clean-css')
    }).match('::package', {
        postpackager: fis.plugin('loader', {
            //單頁面合並零散資源
            allInOne: true
        })
    }).match('*.{js,css}', {
        //為js，css類型文件添加md5戳
        useHash: true
    })
    .match('::image', {
        //為所有的圖片類型添加md5戳
        useHash: true
    });

所以配置上半部分都屬於測試環境發布配置，只處理less轉義，js模塊化，文件資源定位輸出等基本操作。

在代碼最下方有一段屬於生產環境的配置，只有在生產環境下我們才需要代碼合並，壓縮，添加md5戳，不然合並壓縮了我們也不好調試功能。

這兩段配置是可以通過發布指令區分發布的，比如我在測試環境發布，指令應該是這樣：

fis3 release -d D:\output

如果你要在生產環境發布，請在release后添加meaid中的字段prod(這個字段是隨便寫的)，比如：

fis3 release prod -d D:\output

說直白點，我們前面的配置都是fis.match()，后面有一段配置是fis.media('隨便取名').match()這樣寫的。

在發布時，如果你在發布指令release后加了media自定義的字段，整個配置都會執行，但如果你不加media字段，那么就只執行fis.match()相關配置，這樣我們就能在不同環境區分發布了。

那么針對於fis3就聊這么多了，琢磨着用這玩意的人真不多，估計也沒多少人願意看，那么本文結束。