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