基于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');
    });
}

4. 结语

fis3是一个大而全的工具，不过也有些问题，commonJs用起来不太方便（相比于webpack也有些欠缺），babel没有想象中的好用，不过不影响它成为一个好用适合传统项目的工具，欢迎你们提出意见和建议修改~~~