基於fis3的前段自動化（適合中大型項目）

時間 2019-11-08

標籤基於 fis3 fis 前段自動化適合大型項目欄目測試自動化简体版

原文原文鏈接

1. 前段自動化必要性

現代項目中使用大量sass，coffeescript，es6,jshint等等大量的編譯型，預處理型工具，若是在前端項目中每一個都配置一個config文件並安裝上對應軟件包勢必會大量增長前端人員工做量css
一個大型項目須要大量的外部js，css文件（固然，考慮到項目的純淨性和可修改維護性應該減小外部組件引用，不過針對公司若是成員沒有足夠能力或時間完成組件）如mvvm框架、jquery、bootstrap、各類ui組件、lodash等等，會增長頁面引用個數，遇到這種狀況會將這些文件按打包，本身幹？仍是給自動化工具吧html
圖片的壓縮功能也能夠交給自動化工具前端
繁雜的前端模塊化也能夠輕鬆實現（這篇咱先不說）node

2. 爲啥使用fis3

先放fis鏈接jquery
功能大而全：雖然並不像gulp那樣小而美而且插件那麼多，可是足夠平日項目平常開發webpack
不會影響源代碼，徹底將源代碼通過處理後產出git
配置簡單es6
具體的看官網，省的覺得是軟文github

3. 舉個栗子

先放代碼：這個項目是一個koa和fis結合的代碼，再次咱們只先說fis相關的web
目錄結構：
1. 在frontend中就是fis相關代碼，其餘文件就是nodejs和koa中的某些配置（隨口一所：node項目中gulp的做用：代碼檢測nodejs，啓動fis腳本，刪除fis產生的前端文件）
2. /frontend/src/：前端項目的源代碼
```
/frontend/src
|--components/compass
|--externalM
|--inlinePart
|--internalM
|--test
|--views
|--fis-conf.js
```
3. /frontend/src/externalM：主要放置外部引用文件js,scss，img（我這裏隨便放置幾個經常使用的）
```
/frontend/src/externalM
|--amazeui
|--avalon
|--jqRaty
|--mocha
|--es6-promise.js
|--jquery.js
```
4. /frontend/src/internalM：主要放置內部引用文件，包括對應頁面，組件，公共的js，scss,img文件;內部以文件夾區分各個模塊
```
/frontend/src/internalM
|--hello
     |--hello.js
     |--hello.scss
|--publicAsset
```
5. /frontend/src/views：放置各個頁面的視圖文件
```
/frontend/src/views
|--error.ejs
|--hello.ejs
|--notfound.ejs
```
6. /frontend/src/inlinePart/：放置引用部分，能夠理解爲jsp中的include
```
/frontend/src/inlinePart
|--footer.html
|--header.html
```
7. /frontend/src/test：放置單元測試文件
```
/frontend/src/test
|--hello.test.ejs
```
8. /frontend/src/components：放置fis所用到的組件，好比sass須要的compass擴展
9. /frontend/src/fis-conf.js：重頭戲，fis的配置文件

fis的配置文件：

忽略文件 + 雪碧圖

fis.set('project.ignore',['components/**','fis-conf.js']);//若是不設置忽略全部文件都會產出，因此先把這兩個文件忽略掉
fis.match('::package',{//匹配打包階段
    postpackager : fis.plugin('loader',{
        useInlineMap : true
    }),
    spriter : fis.plugin('csssprites',{//設置雪碧圖
        margin: 80,
        layout: 'matrix'
    })
});

文件打包：將外部文件打包減小網絡請求，在發佈模式下將代碼壓縮

//------------------css打包------------------
fis.match('{externalM/amazeui/css/amazeui.min.css}',{
    packTo : '/pkg/pkg.css'
});
fis.match('/pkg/pkg.css',{
    release : '/static/pkg/pkg.css',
    url : '$0'
});
fis.media('publish').match('/pkg/pkg.css',{
    release : '/static/pkg/pkg.css',
    url : '$0',    //fis一個很牛的特性，能夠指定產出對應資源的url
    optimizer : fis.plugin('clean-css'),    //壓縮
    useHash : true    //使用md5後綴清除緩存
});
//------------------js打包------------------
fis.match('externalM/{jquery,amazeui/js/amazeui,avalon/avalon.shim,es6-promise}.js',{
    packTo : '/pkg/pkg.js'
});
//在此處設置js代碼打包放置順序（amazeui依賴jquery）
fis.match("externalM/jquery.js",{
    packOrder : 1
});
fis.match("externalM/avalon/avalon.shim.js",{
    packOrder : 2
});
fis.match("externalM/es6-promise.js",{
    packOrder : 3
});
fis.match("externalM/amazeui/js/amazeui.js",{
    packOrder : 4
});
fis.match('/pkg/pkg.js',{
    release : '/static/pkg/pkg.js',
    url : '$0'
});
fis.media('publish').match('/pkg/pkg.js',{
    release : '/static/pkg/pkg.js',
    url : '$0',
    useHash : true,
    optimizer :fis.plugin('uglify-js',{    //壓縮代碼
        compress:{
            drop_console : true
        }
    })
});

內部css

fis.media('publish').match('internalM/**.scss',{
    release : '/static/$0',
    url : '$0',
    rExt : '.css',    //重命名後綴
    useSprite: true,    //使用雪碧圖
    parser : fis.plugin('node-sass',{    //使用sass編譯
        include_paths:[    //引用compass
            './components/compass'
        ]
    }),
    optimizer : fis.plugin('clean-css'),
    useHash : true
});

內部js引用（外部引用大體相同，這裏再也不贅述）

fis.media('publish').match('internalM/**.js',{
    release : '/static/$0',
    url : '$0',
    lint : fis.plugin('jshint',{    //設置jshint
           ...
    }),
    useHash : true,
    optimizer : fis.plugin('uglify-js',{
        compress:{
            drop_console : true
        }
    })
});

頁面文件

fis.match('{views,test}/**.ejs',{
    isHtmlLike : true    //設置其爲html文件模式
});
fis.match('test/**.ejs',{
    isHtmlLike : true,
    release : '/views/$0'    //匹配到的單元測試頁面文件，爲避免目錄混亂，在產出的views目錄中添加test目錄，而且也是爲了後臺配置路由方便進行測試
});

其餘資源引用

//------------------圖片------------------
fis.match('*.png',{
    optimizer : fis.plugin('png-compressor',{
        type : 'pngquant'
    }),
    release : '/static/$0',
    url : '$0',
});
//------------------字體------------------
fis.match('*.{eot,svg,ttf,woff}',{
    release : '/static/$0',
    url : '$0',
});

文件引用：在引用css，js時最廣泛都放在html中，不過fis提過能夠吧文件引用放在js中（不是模塊化，只是簡單預處理功能），這樣作有點可讓我門在寫頁面時結構簡單很多，並且寫單元測試也方便很多；以下所示只要引用了這個文件的html都會把將在註釋中寫好的文件引用進來，並且若是包括自動打包的文件也會引用打包後的文件

/**
 * @require /externalM/jquery.js
 * @require /externalM/amazeui/js/amazeui.js
 * @require /externalM/jqRaty/jquery.raty.js
 * @require /externalM/avalon/avalon.shim.js
 * @require /internalM/hello/hello.scss
 * @require /externalM/amazeui/css/amazeui.min.css
 * @require /externalM/es6-promise.js
 */

function backgroundChange(){
    return new Promise(function(resolve){
        setTimeout(resolve,1000);
    }).then(function(){
        $('body').css('background','red');
    });
}