由于OPOA的兴起，前后端分离的开发模式已经成为web开发的趋势，搭建一个能够快速进行并行开发独立联调的环境是非常重要的，感谢grunt gulp的前端构建工具，让这个目标变为了可能。下面就介绍一种grunt配置方式能够实现如下目标，让f2er能够拷贝即用

• 1 搭建server
• 2 监听js html css文件变化自动刷新（不使用插件）
• 3 实现代理功能，访问后端的api接口 调试前端src下的文件。

假设我们的web站点为 apis路径下是后台的接口，src下是所有的前端文件 index.html是入口的文件，package.json和Gruntfile文件如下：

{
  "name": "webtools",
  "version": "0.0.1",
  "description": "grunt tools for web development",
  "main": "Gruntfile.js",
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "zhangmeng<zhangmeng712@126.com>",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-connect": "^1.0.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-connect-proxy": "",
    "connect-livereload": "^0.5.4",
    "serve-static": "^1.10.2"
  }
}

var HOSTNAME = '0.0.0.0';
var LIVERELOAD_PORT = 9991;
var SERVER_PORT = 9966;
var serveStatic = require('serve-static');
//如果请求header中有验证信息如cookie则需要自己配置
var cookie = 'xxxxxxx';
module.exports = function (grunt) {
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({
        connect: {
            options: {
                port: SERVER_PORT,
                hostname: HOSTNAME
            },
            proxies: [
                {
                    context: '/apis', // 这是你希望出现在grunt serve服务中的路径，比如这里配置的是http://127.0.0.1:9000/api/
                    host: 'dev.alp.xx-inc.com',
                    port: 80, // 远端服务器端口
                    headers: {
                        'cookie': cookie,
                        'host': 'dev.alp.xx-inc.com'
                    },
                    rewrite: {
                        '^/apis/': '/'
                        //地址映射策略，从context开始算，把前后地址做正则替换，如果远端路径和context相同则不用配置。
                    }
                }
            ],
            livereload: {
                options: {
                    open: {
                        target: 'http://' + HOSTNAME + ':' + SERVER_PORT + '/index.html?debug&mock&local'
                    },
                    // 通过LiveReload脚本，让页面重新加载。
                    middleware: function (connect, options) {
                        var proxyMid = require('grunt-connect-proxy/lib/utils').proxyRequest;
                        var livereloadMid = require('connect-livereload')({port: LIVERELOAD_PORT});
                        var serveMid = serveStatic(__dirname + '/');
                        var midArr;
                        //判断联调还是mock开发
                        var isLiantiao = grunt.option('liantiao');
                        if (isLiantiao) { midArr= [livereloadMid, proxyMid, serveMid ]}
                        else {midArr= [livereloadMid, serveMid ]}
                        return midArr;
                    }
                }
            }
        },
        watch: {
            doc: {
                files: ['src/**/*.js', 'src/**/*.html', 'src/**/*.css'],
                tasks: []
            },
            options: {
                livereload: LIVERELOAD_PORT,
                spawn: true
            }
        }

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

    grunt server:livereload #mock调试
    grunt server:livereload --liantiao #前后端联调

知识点

• load-grunt-tasks 可以帮助我们把package.json中含有grunt-*的内容load下来，代替grunt.loadNpmTasks(‘grunt-xxx’)
• var serveStatic = require(‘serve-static’); 老的connect版本中使用的是connect.static现在已经都被serve-static中间件代替
• 如果后端是个通用的接口则可以直接使用proxies的配置方法，如果有些系统需要cookie信息（ssl证书产生）则需要先访问网站，得到对应信息，然后在手动拷贝到Gruntfile.js中去。或者命令行访问 curl -i -L ‘http://dev.alp.xxxx-inc.com/’ -k –cert cer.pem得到对应的header信息拷贝过来。