基于fis3的前段自动化(适合中大型项目)

1. 前段自动化必要性

  • 现代项目中使用大量sass,coffeescript,es6,jshint等等大量的编译型,预处理型工具,如果在前端项目中每个都配置一个config文件并安装上对应软件包势必会大量增加前端人员工作量

  • 一个大型项目需要大量的外部js,css文件(当然,考虑到项目的纯净性和可修改维护性应该减少外部组件引用,不过针对公司如果成员没有足够能力或时间完成组件)如mvvm框架、jquery、bootstrap、各种ui组件、lodash等等,会增加页面引用个数,遇到这种情况会将这些文件按打包,自己干?还是给自动化工具吧

  • 图片的压缩功能也可以交给自动化工具

  • 繁杂的前端模块化也可以轻松实现(这篇咱先不说)

2. 为啥使用fis3

  • 先放fis连接

  • 功能大而全:虽然并不像gulp那样小而美并且插件那么多,但是足够平日项目日常开发

  • 不会影响源代码,完全将源代码经过处理后产出

  • 配置简单

  • 具体的看官网,省的以为是软文

3. 举个栗子

  • 先放代码:这个项目是一个koa和fis结合的代码,再次我们只先说fis相关的

  • 目录结构:

    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的配置文件:

    1. 忽略文件 + 雪碧图

      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'
          })
      });
    2. 文件打包:将外部文件打包减少网络请求,在发布模式下将代码压缩

      //------------------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
              }
          })
      });
    3. 内部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
      });
    4. 内部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
              }
          })
      });
    5. 页面文件

      fis.match('{views,test}/**.ejs',{
          isHtmlLike : true    //设置其为html文件模式
      });
      fis.match('test/**.ejs',{
          isHtmlLike : true,
          release : '/views/$0'    //匹配到的单元测试页面文件,为避免目录混乱,在产出的views目录中添加test目录,并且也是为了后台配置路由方便进行测试
      });
    6. 其他资源引用

      //------------------图片------------------
      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没有想象中的好用,不过不影响它成为一个好用适合传统项目的工具,欢迎大家提出意见和建议修改~~~

你可能感兴趣的:(fis3,前端自动化)