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

由于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信息拷贝过来。