使用grunt搭建前后端分离的开发环境

喊了很长时间的前后端分离，这两天终于花时间实现，在这里总结一下。

为什么前后端分离

先介绍我们这边的开发模式，我们后端采用的Java，开发IDE使用的eclipse。因为整个系统比较庞大，又切分为多个小工程，通过maven管理工程之间的依赖关系。开发/调试时启动eclipse的tomcat服务。在这种模式下开发，只做前端页面的小伙伴时不时会遇到以下问题：

Eclipse编译报错，tomcat服务无法启动。小伙伴们需要更新maven, 删除以前的java包，重新编译启动服务。这些操作，在快的情况下可能半个小时内可以搞定，在不顺利的时候可能大半天都用在启动服务商了
每次保存代码时，Eclipse都会重新编译java文件，需要等编译发布完成之后才可以刷新页面，看到修改后的效果，导致效率低下

方案

google/bing/baidu大法过后，打算用以下思路来处理前后端分离：

前端开发人员不启动eclipse，而是启动grunt-connect提供的静态web服务
在grunt-connect配置中增加一个插件，用来转发请求，将所有的后台服务接口转发到另外一台后台服务器上示例代码如下

// gruntfile.js
// ...

// 引入connect-modrewrite-do插件，用来转发请求
var proxyRewrite = require('connect-modrewrite-do');

grunt.initConfig({
  connect: {
    options: {
      base: [
        // 数组的形式配置不同子工程的地址
        'D:/work/projects/projectA/src',
        'D:/work/projects/projectB/src',
        '.'
      ],
      port: 9000,
      hostname: '*',
      livereload: true
    },
    websocket: {
                proxies: [
                    {
                        context: '/websocket',
                        host: proxyServer.split(':')[0],
                        port: proxyServer.split(':')[1],
                        ws: true
                    }
                ]
            },
    livereload: {
      options: {
        open: false;
        middleware: function(connect, options, middlewares) {
          // 设置websocket转发
          middlewares.unshift(require('grunt-connect-proxy/lib/utils').proxyRequest);
          
          // CORS middleware, 设置通用的头部信息
          middlewares.unshift(function(req, res, next) {
            res.setHeader('Access-Control-Allow-Origin', '*');
            res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
            res.setHeader('Access-Control-Allow-Headers', 'authorization, Origin, X-Requested-With, Content-Type, Accept');
            res.setHeader('Access-Control-Allow-Credentials', true);
            
            next();
          });
          
          // 使用connect-modrewrite插件
          middlewares.unshift(proxyRewrite([
            '^/api/ http://10.0.3.3/api/ [P]',
            '^/files/ http://file.server.ip.address/files/ [P]'
          ]));
        }
      }
    }
  }
})
grunt.loadNpmTasks('grunt-contrib-connect');

grunt.registerTask('server', [
    'configureProxies:websocket',
    'connect:livereload',
    'watch'
]);
// ...