grunt插件之connect

启动一个web服务器连接

启动任务

使用grunt connect命令运行此任务。

请注意,只有grunt正在运行,该服务器才会运行。一旦grunt的任务完成,Web服务器就停止。可以通过keepalive选项来设置,并且可以通过运行任务来临时启用 grunt connect:keepalive

此任务旨在与随后运行的另一个任务一起使用,如grunt-contrib-qunit插件 的qunit任务。

Options参数

port

类型: Integer(整数)
默认值:8000

网络服务器将响应的端口。如果指定的端口已经在使用中,则该任务将失败(除非设置了useAvailablePort)。您可以使用特殊值0'?'使用系统分配的端口。

protocol

类型:String
默认值:'http'

网络通信协议,可以是'http', 'http2''https'.

hostname

类型:String
默认值:0.0.0.0

可以访问网络服务器的主机名.
将其设置为'*',像“ 0.0.0.0”,将使服务器可以从任何本地局域网 的IPv4地址访问 '127.0.0.1',并将IP分配给以太网或无线接口如'192.168.0.x'或'10.0.0.x'。

如果open设置为true,该hostname设置将用于生成浏览器打开的URL,默认为localhost指定通配符主机名。

base

类型:String or Array or Object
默认值:.

  • String 提供文件的基本路径(或根目录),默认为 Gruntfile.js 所在的目录
  • Array 多个被映射到网站虚拟根目录的物理路径
  • Object 包含pathoptions参数,options 会传递给 serve-state 模块处理。
directory

类型:String
默认值:null

设置到希望能够浏览的目录 用于覆盖base选项的可浏览目录。

keepalive

类型:Boolean
默认值:false

让服务器持续运行。请注意,如果启用此选项,则此任务之后指定的任何任务将永远不会运行。默认情况下,一旦grunt的任务完成,Web服务器停止。此选项会更改该行为。

此选项也可以通过运行任务进行临时启用 grunt nnect:targetname:keepalive

debug

类型:Boolean
默认值:false

将debug选项设置为true以启用日志记录,而不是使用--debug标志。

livereload

类型:BooleanNumber
默认值:false

设置true或端口号,以使用connect-livereload将实时重新加载脚本的标记注入到页面中。

这不执行实时重新加载。它旨在与grunt-contrib-watch或另一个任务一起使用,在文件更改时将触发实时重新加载服务器。

open

类型: BooleanStringObject
默认值:false

在默认浏览器中打开提供的页面。

这可以是以下之一:

  • 指定true打开默认服务器URL(从protocol,hostname
    和port
    设置生成)

  • 指定URL会打开该URL

  • 使用以下键指定一个对象,直接配置为open:

{
  target : ' http:// localhost:8000 ',// target url打开 
  appName : ' open ',//打开应用程序的名称,即:open,start,xdg-open 
  callback : function(){} / /当应用程序打开时调用 
}
useAvailablePort

类型:Boolean
默认值:false

如果true任务将在set port选项之后查找下一个可用端口。

onCreateServer

类型:FunctionArray
默认值:null

创建服务器对象后要调用的函数,以允许集成需要访问的库来连接服务器对象。一个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
          });
        }
      }
    }
  }
});
middleware

类型:FunctionArray
默认值:使用 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;
        },
      },
    },
  },
});

用法示例

基本使用

在这个例子中,grunt connect(或更详细地grunt connect:server)将启动一个静态Web服务器http://localhost:9001/,其基本路径设置为www-root相对于gruntfile的目录,任何随后运行的任务将能够访问它。

// Project configuration.
grunt.initConfig({
  connect: {
    server: {
      options: {
        port: 9001,
        base: 'www-root'
      }
    }
  }
});

如果您希望Web服务器使用默认选项,只需省略options对象即可。您仍然需要指定目标(在此示例中是uses_defaults),目标的配置对象可以为空或不存在。在这个例子中,grunt connect(或更详细地grunt connect:uses_defaults)将使用默认选项启动一个静态Web服务器。

// Project configuration.
grunt.initConfig({
  connect: {
    uses_defaults: {}
  }
});
多个服务器

您可以通过为每个服务器创建目标来指定要独立运行或同时运行的多个服务器。在这个例子中,运行grunt connect:site1grunt connect:site2将启动相应的Web服务器,但运行grunt connect将运行两个。请注意,指定了keepalive选项的任何服务器将阻止任何任务或目标运行。

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

静态服务器模块的选项.详见serve-static:

grunt.initConfig({
  connect: {
    server: {
      options: {
        port: 8000,
        base: {
          path: 'www-root',
          options: {
            index: 'somedoc.html',
            maxAge: 300000
          }
        }
      }
    }
  }
});

你可能感兴趣的:(grunt插件之connect)