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