利用grunt

前后端分离这个词一点都不新鲜，完全的前后端分离在岗位协作方面，前端不写任何后台，后台不写任何页面，双方通过接口传递数据完成软件的各个功能实现。此种情况下，前后端的项目都独立开发和独立部署，在开发期间有2个问题不可避免：第一是前端调用后台接口时的跨域问题（因为前后端分开部署）；第二是前端脱离后台服务后无法独立运行。本文总结最近一个项目的工作经验，介绍利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境的实践过程，希望能对你有所帮助。

注：

（1）本文的相关内容需对前端构建工具grunt有所了解：http://www.gruntjs.net/getting-started，这个工具可以完成前端所有的工程化工作，包括代码和图片压缩，文件合并，静态资源替换，js混淆，less和sass编译成css等等，推荐没有用过类似工具的前端开发人员去了解。

（2）grunt-contrib-connect和grunt-connect-proxy是grunt提供的两个插件，前者可以启动一个基于nodejs的静态服务器，这样前端就能脱离后端通过web服务的方式来访问自己开发的东西；后者可以把前端项目里面某些特殊的请求代理到其它服务器，哪些请求能够通过代理转发到别的服务器，这个规则都是可配置的，这样就能把一些跟后台交互的请求通过代理的方式，在开发期间，转发到后端的服务来处理，从而避免跨域问题。

代码下载

1. 效果演示

在前面提供的代码中，里面有两个文件夹：

分别代表前后端独立运行的两个项目，client表示前端，server表示服务端。在实际运行client和server里面的服务之前，请确保已经安装好了grunt-cli，如果没有安装，请按照grunt的文档先安装好grunt-cli这个npm的包。如果你已经安装好了grunt-cli，那么进入到client或者server文件夹下，就能直接使用grunt的命令来启动服务了，不需要再运行npm install 来安装依赖了，因为client和server文件夹下已经包含进了下载好的依赖。在实际的前后端项目中，server端可以是任何架构类型的项目，java web ,php, asp.net等等都可以，demo里面为了简单模拟一个后台服务，于是就利用grunt启动一个静态服务来充当server端，不过它实际上的作用跟java web等传统后端项目是一样的。

为了看到请求被代理转发的效果，请先在server文件夹下启动服务，命令是：grunt staticServer：

只要看到跟截图运行类似的结果，就表示server端的服务启动成功。从截图中还能看到server端的服务的访问地址是：http://localhost:9002/。

然后在client文件夹下启动配置了代理的服务，命令是：grunt proxyServer：

只要看到跟截图运行类似的结果，就表示client端的服务启动成功。从截图中能看到client端服务的访问地址是：http://localhost:9001/，同时还可以看到服务代理的配置：

这段运行结果说明，client端里面以/provider开头的请求都会被代理转发，并且会被代理到http://localhost:9002/provider 来处理。举例来说，假如在client端里面发起一个请求，这个请求的URL是：http://localhost:9001/provider/query/json/language/list，那么最终处理这个请求的服务地址实际上是：http://localhost:9002/provider/query/json/language/list。

client端启动之后，应该会自动打开浏览器，访问http://localhost:9001/，显示的是client端的首页。打开首页之后，按F12打开开发者工具，如果在控制台看到如下类似的消息，就说明首页里的请求正确地通过代理请求到了服务端的数据：

在client的首页里面，我发起了一个ajax请求，请求地址为http://localhost:9001/provider/query/json/language/list，在client文件夹下根本不存在provider文件夹，所以如果没有代理的话，这个请求肯定会报404的错误；它之所以能够正确的加载，完全是因为通过代理，请求到了server文件夹下相应的文件：

如果不通过代理，在localhost:9001/的服务里，请求localhost:9002/的数据是肯定会有跨域问题的，而代理可以完美的解决这个问题。

前面这一小部分演示了demo里面如何通过代理来解决跨域问题，下面一部分演示如何在脱离后端服务的情况下如何正常运行前端项目，首先请关闭之前打开的client服务和server端服务以及浏览器打开的client页面，然后打开client/Gruntfile.js文件，找到以下部分：

把provider改成api，把false改成true；

接着在client文件夹，运行非代理的静态服务，这个服务不会配置代理，启动命令是：grunt staticServer：

打开浏览器的开发者工具，在控制台应该可以看到如下消息：

这个过程是：原来通过代理请求地址是：http://localhost:9001/provider/query/json/language/list，在没有代理的时候，我会把http://localhost:9001/provider/query/json/language/list这个请求改成请求http://localhost:9001/api/query/json/language/list.json ，而在我client文件夹下存在这个json文件：

也就是说我会把跟服务端所有接口的返回的数据都按相同的路径，在本地以json文件的形式存在api文件夹下，在没有代理的时候，只要请求这些json文件，就能保证我所有的操作都能正确请求到数据，前端的项目也就能脱离代理运行起来了，当然这个模式下的数据都是静态的了。

接下来我会介绍如何前面这些内容的实现细节，只介绍client里面的要点，server里面的内容很简单，只要搞清楚了client，server一看就懂：）

2. Grunt配置

在了解配置之前，先要熟悉项目的文件夹结构：

仅仅是为了完成demo，所以项目的文件夹结构和Grunt配置都做了最大程度的简化，目的就是为了方便理解，本文提供的不是一个解决方案，而是一个思路，在你有需要的时候可以参考改进应用到自己的项目当中，在前端工程化这一块，要用到的插件比demo里面要用到的多的多，你得按需配置。就demo而言，最核心的插件当然是grunt-contrib-connect和grunt-connect-proxy，但是要完成demo，也离不开一些其它的插件：

load-grunt-tasks：我用它一次性加载package.json里面的所有插件：

grunt-contrib-copy：我用它来复制src里面的内容，粘贴到dist目录下：

只要运行grunt copy任务，就会看到项目结构了多了一个dist文件夹：

grunt-contrib-watch： 我用它监听文件的改变，并自动执行定义的grunt任务，同时还可以通过livereload自动刷新浏览器页面：

grunt-replace：我用它来替换文件中某些特殊字符串，这样就能够在不手动更改源代码的情况下改变代码。非代理模式之所以能请求到本地的静态json数据，并不是因为我手动改变了请求地址，而是改变了请求地址处理函数中的处理规则，这个规则的改变实际上就是通过grunt-replace来做的：

替换的规则通过getReplaceOptions这个函数来配置：

注意注释部分的说明，所谓的本地模式，其实就是运行grunt staticServer的时候，代理模式就是运行grunt proxyServer的时候，这段注释要求在运行grunt staticServer之前必须先把API_NAME改成api，把DEVELOP_MODE改成true，只有这样那些需要代理的请求才会请求本地的json文件，在运行grunt proxyServer之前必须先把API_NAME改成provider，把DEVELOP_MODE改成false，只有这样才能正确地将需要代理的请求进行转发。

3. 重点：grunt-contrib-connect和grunt-connect-proxy的配置

在grunt任务配置中，通常每个插件都会配置成一个任务，但是grunt-connect-proxy不是这样，它是与grunt-contrib-connect一起配置的：

connect: {  options: {    port: '9001',    hostname: 'localhost',    protocol: 'http',    open: true,    base: {      path: './',      options: {        index: 'html/index.html'      }    },    livereload: true  },  proxies: [    {      context: '/' + API_NAME,      host: 'localhost',      port: '9002',      https: false,      changeOrigin: true,      rewrite: proxyRewrite    }  ],  default: {},  proxy: {    options: {      middleware: function (connect, options) {        if (!Array.isArray(options.base)) {          options.base = [options.base];        }        // Setup the proxy        var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];        // Serve static files.        options.base.forEach(function (base) {          middlewares.push(serveStatic(base.path, base.options));        });        // Make directory browse-able.        /*var directory = options.directory || options.base[options.base.length - 1];         middlewares.push(connect.directory(directory));         */        return middlewares;      }    }  }}

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：利用grunt

关键词：