前端开发 Grunt 之 Connect

在前端开发过程当中，咱们须要在开发过程当中，将开发中的站点部署到服务器上，而后，在浏览器中查看实际的效果，在 Grunt 环境下，能够直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的支持，在开发过程当中，直接查看效果。

1. Connect 资源

与 Grunt 集成的 Connect 能够在 GitHub 上找到，地址：https://github.com/gruntjs/grunt-contrib-connect

安装的时候，直接经过 NPM 就能够，不用本身下载。执行下面的命令将 grunt-contrib-connect 安装到你的项目中。

npm install grunt-contrib-connect --save-dev

安装以后，须要在你的 Gruntfile.js 项目文件中，加载这个插件。

grunt.loadNpmTasks('grunt-contrib-connect');

具体的配置信息见下一步了。

2.  基本配置

在你的 Gruntfile.js 中，添加一个 connect 的配置节。

在 connect 中设置一个 connect 任务的名字，注意不要叫 options ，这是 connect 保留的配置名。咱们这里称为 server。

完成以后的 Gruntfile.js 文件以下：

'use strict';  

module.exports = function (grunt) { // Project configuration.  grunt.initConfig({ connect: { server: { options: { port: 8000, hostname: '*', base: ['src/'] } } } }); grunt.loadNpmTasks('grunt-contrib-connect'); }

这里的配置是说服务器将工做在 8000 端口，网站的根目录映射到物理目录的 src/ 中。

咱们能够在 src 中建立一个名为 index.html 的网页，进行测试。
保存配置文件以后，在命令行执行  grunt connect

PS C:\study\grunt> grunt connect
Running "connect:server" (connect) task Started connect web server on http://localhost:8000  Done, without errors.

在执行 Grunt 的过程当中，网站服务器将会启动，你能够经过浏览器来访问这个服务器。可是，在 grunt 执行完成以后，服务器将会被自动关闭。因此，你可能根原本不及切换到浏览器去访问你的页面。

使用 keepalive 这个选项可使得 grunt 在执行到 connect 的时候，不会退出这个任务，保持服务器的持续执行，这样你就能够一直访问这个服务器了。可是，须要注意的是，这个 grunt 任务会阻塞后继任务的执行，因此，你须要将这个任务排在最后一个任务。

'use strict';  

module.exports = function (grunt) { // Project configuration.  grunt.initConfig({ connect: { server: { options: {
 protocol: 'http', port: 8000, hostname: '*', keepalive: true, base: ['src/'] } } } }); grunt.loadNpmTasks('grunt-contrib-connect'); }

这个时候，从新执行 grunt connect 就会看到 Waiting forever... 的输出，直到你 Ctrl+C 终止这个任务，grunt 会一直停留在 connect 这个任务上。

PS C:\study\grunt> grunt connect
Running "connect:server" (connect) task Waiting forever... Started connect web server on http://localhost:8000 ^CTerminate batch job (Y/N)? y

在这一步，咱们配置了以下的服务器参数：

• protocol 服务协议，能够是 'http' 或者 'https', 若是使用 https ，须要额外配置服务器证书。
• port 服务器的端口，默认为 8000
• base 能够是一个字符串，或者一个数组，或者一个对象，用来表示映射到网站虚拟根目录的目标。
  • 字符串，映射到网站虚拟根目录的物理路径，默认为 Gruntfile.js 所在的目录
  • 数组，多个被映射到网站虚拟根目录的物理路径
  • 对象，每一个路径能够配置更加详细的选项，能够经过 { path: xxx, options: xxxx} 进行配置，其中 options 会传递给 serve-state 模块处理。
• hostname 默认为 '0.0.0.0'，表示能够从任何网络地址来访问。
• keepalive 是否保持服务，不会退出服务

3. 高级配置

1. open

若是你但愿在启动服务以后，自动打开浏览器，而不用本身打开浏览器，再输入访问地址，能够将 open 设置为 true。

open 能够设置 boolean, 字符串，对象。

默认为 false，设置为 true 将会自动打开浏览器。

若是设置为字符串，则为浏览器打开的地址。

对象的配置将会直接传递给 open 处理。

{
  target: 'http://localhost:8000', // target url to open, 目标路径 appName: 'chrome', // name of the app that opens, ie: open, start, xdg-open，自动启动的应用名称, 好比你的浏览器：chrome callback: function() {} // called when the app has opened }

2. livereload

能够配置为 boolean 或者 数值，用来表示是否支持 livereload。

设置为 true 或者数值表示支持 connect-livereload，可是这个设置不能直接使用，须要 connect-livereload 的配合，因此并不能直接实现自动加载。你还须要 grunt-contrib-watch 或者其余的库支持来实现文件修改时的自动加载。

下一次咱们将会介绍这个 livereload 的使用。

3. useAvailablePort

如何使用端口，若是设置为 true，则任务会寻找 port 指定的下一个可用的端口，默认为 false.

 

4. onCreateServer

服务建立以后的回调函数，容许集成其它库到网站中，例如，集成 Socket.IO 的示例。注意，这须要你先准备好了 socket.io 模块。

grunt.initConfig({
  connect: {
    server: {
      options: {
        port: 8000, hostname: '*', onCreateServer: function(server, connect, options) { var io = require('socket.io').listen(server); io.sockets.on('connection', function(socket) { // do something with socket  }); } } } } });

5. middleware 

很显然，网站处理的中间件。若是你以为这个默认的静态文件服务器不够强大的话，能够经过中间件进行扩展。

能够配置一个函数或者数组，默认为使用 options.base 处理静态文件和目录浏览的数组。

若是提供了一个数组的话，就会取代默认的服务器处理，直接采用自定义的中间件进行处理，这须要咱们彻底定义服务器中的处理。

数组的示例

grunt.initConfig({
  connect: {
    server: {
      options: {
        middleware: [
          function myMiddleware(req, res, next) { res.end('Hello, world!'); } ], }, }, }, });

若是是函数的话，会自动添加默认的静态文件处理中间件，再执行自定义的中间件函数。

函数的示例

grunt.initConfig({
  connect: {
    server: {
      options: {
        middleware: function(connect, options, middlewares) { // inject a custom middleware into the array of default middlewares middlewares.unshift(function(req, res, next) { if (req.url !== '/hello/world') return next(); res.end('Hello, world from port #' + options.port + '!'); }); return middlewares; }, }, }, }, });

这部分的源码以下：

    // The middleware options may be null, an array of middleware objects, // or a factory function that creates an array of middleware objects. // * For a null value, use the default array of middleware // * For a function, include the default array of middleware as the last arg // which enables the function to patch the default middleware without needing to know // the implementation of the default middleware factory function var middleware; if (options.middleware instanceof Array) { middleware = options.middleware; } else { middleware = createDefaultMiddleware.call(this, connect, options); if (typeof(options.middleware) === 'function') { middleware = options.middleware.call(this, connect, options, middleware); } }

 

6. 多个服务器

能够配置多个服务器，须要注意的是，若是有一个服务器的 keepalive 设置为 true，就会阻塞其它的服务器。

// Project configuration. grunt.initConfig({ connect: { site1: { options: { port: 9000, base: 'www-roots/site1' } }, site2: { options: { port: 9001, base: 'www-roots/site2' } } } });

7. HTTPS

使用 https 协议须要预先进行证书的配置。

若是没有证书的话，可使用 OpenSSL 建立自签名的证书做为本地的根证书。

### Create ca.key, use a password phrase when asked
### When asked 'Common Name (e.g. server FQDN or YOUR name) []:' use your hostname, i.e 'mysite.dev' openssl genrsa -des3 -out ca.key 1024 openssl req -new -key ca.key -out ca.csr openssl x509 -req -days 365 -in ca.csr -out ca.crt -signkey ca.key ### Create server certificate openssl genrsa -des3 -out server.key 1024 openssl req -new -key server.key -out server.csr ### Remove password from the certificate cp server.key server.key.org openssl rsa -in server.key.org -out server.key ### Generate self-siged certificate openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

而 Gruntfile.js 中则须要进行相应的配置。

// Project configuration. grunt.initConfig({ connect: { server: { options: { protocol: 'https', port: 8443, key: grunt.file.read('server.key').toString(), cert: grunt.file.read('server.crt').toString(), ca: grunt.file.read('ca.crt').toString() }, }, }, });

 

若是你已经看到这里，你应该可使用 grunt 建立一个开发中的测试服务器。