先说下这两个插件配合的用处，简单的说，它们可以拯救你的F5。connect用于建立一个静态服务器，watch监听文件的修改并自动实时刷新浏览器的页面。
还是options走起。
connect(V0.9.0)的options(github地址)
- port: 静态服务器监听的端口，默认8000
- protocol: 协议名，支持'http'和'https'，默认'http'
- hostname: 合法的主机名，默认'0.0.0.0'，意味着只要能ping到本机的设备都可以通过ip访问，设为'localhost'则仅支持本机访问
- base: 静态服务器文件根目录，支持String、Array、Object
ok，介绍完上面四个就可以搭个简单的静态服务器了，文件目录还是接上回，src下结构
把能用上的option全用上connect: {
options: {
port: 9000,
protocol: 'http',
hostname: 'localhost'
},
serve :{
options: {
base: [
'src'
]
}
}
}然后grunt，打印出这么个玩意儿
Running "connect:serve" (connect) task
Started connect web server on http://localhost:9000 Done, without errors.访问http://localhost:9000/，居然报“这个网页无法使用”，什么意思？
原因是当grunt任务结束时，connect任务也结束了，也就是静态服务器开启过，在执行的一瞬间。这是给人类访问的吗，我当时的表情是这样的：
其实这个毫秒级的服务器还真不是给人访问的，是用来测试的：开启服务器，跑测试代码，关闭服务器。作为一个灵长类生物，要访问就要用到下面这个option
- keepalive: 不解释了，直接跑起来
connect: {
options: {
port: 9000,
protocol: 'http',
hostname: 'localhost'
},
serve :{
options: {
base: [
'src'
],
keepalive: true
}
}
}比较下上面的，感受一下
Running "connect:serve" (connect) task
Waiting forever...
Started connect web server on http://localhost:9000正常访问，http://localhost:9000直接链接到了index.html，这应该是服务器端的一个重定向，我们把index.html修改为main.html，然后手动刷新页面，看到的是整个文件夹下的目录结构（注意这不是静态服务器必须的功能，只能说connect在这一点上做的很细腻）。
还记得base的value可以设置为对象吗，对象包含两个属性，path对应上面的文件夹名，options会传递给connect.static模块，详情见页面。
同样还可以设置为数组，可以是字符串数组，也可以是对象数组，我们把main.html改回index.html，然后修改basebase: [
'src',
'dest'
]dest是前一回的输出目录，目录结构是这样的
src和dest下面都有index.html，那我们通过http://localhost:9000/访问到的是哪一个呢，实际操作一下，发现是src下面的index.html，可见文件的搜索是前面的文件夹优先级更高
我们把两个文件夹下的index.html都改为main.html，再次访问http://localhost:9000/，得到的目录结构确是dest的，可见文件夹索引的显示是后面的文件夹优先级更高
如果我想让它显示src的目录结构，有没有办法呢？有，就是下面的option - directory: 默认为null，设置成'src'就可以完成上面的目标了
- debug: 打印每次http请求，默认是false，设置为true后访问http://localhost:9000/，打印出来的如下
Running "connect:serve" (connect) task
Waiting forever...
Started connect web server on http://localhost:9000
[D] server GET / - 10.211 ms - open: 是否自动打开浏览器，默认是false，设置为true则运行grunt后自动在浏览器打开http://localhost:9000/，同时也可以接受url作为value，比如我们想直接访问main.html
open: '<%=connect.options.protocol%>://<%=connect.options.hostname%>:<%=connect.options.port%>/main.html'
还可以接受Object作为value，Object结构如下
{
target: '<%=connect.options.protocol%>://<%=connect.options.hostname%>:<%=connect.options.port%>/main.html',
appName: 'chrome', // name of the app that opens
callback: function() {} // called when the app has opened
} - useAvailablePort: 当端口被占用时自动换其他端口，默认为false
我开启另外一个监听8081的服务器，然后把配置中port改为8081，执行grunt失败，打印出来的log为Running "connect:serve" (connect) task
Waiting forever...
Fatal error: Port is already in use by another process.设置此option为true，再次执行，自动换到了8082端口
Running "connect:serve" (connect) task
Waiting forever...
Started connect web server on http://localhost:8082 - onCreateServer: 创建server成功的回调函数，接受function or function array作为value，默认为null。
github上给出的示例如下：onCreateServer: function(server, connect, options) {
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket) {
// do something with socket
});
} - middleware: 中间件，接受function or function array作为value。
当value为function时，传入参数connect、options、middlewaresmiddleware : function(connect, options, middlewares) {
return middlewares; //当前行为保持不变
}当value为function array时，传入参数request、response、next
middleware: [function(req, res, next) {
next();
}]以上两个option涉及比较多的nodejs概念，不做详述
- livereload: 特意把这个option放到了最后，因为这个option是实现实时刷新的核心，依赖于connect-livereload进行实现，所以将这个插件安装上先
默认值是false，一般接受端口号作为参数，设置为true时相当于设置为39729，soconnect: {
options: {
port: 9000,
protocol: 'http',
hostname: 'localhost'
},
serve :{
options: {
base: [
'src'
],
keepalive: true,
livereload: true
}
}
}执行grunt，访问服务器的任何一个有内容的链接，打开开发者工具，发现body（记住该html必须要有body，偷懒就看不到效果了
）的底部产生了这样一段代码
<script>//<![CDATA[
document.write('<script src="//' + (location.hostname || 'localhost') + ':35729/livereload.js?snipver=1"><\/script>')
//]]></script><script src="//localhost:35729/livereload.js?snipver=1"></script>这段代码单独存在是没有意义的，必须配合watch
watch的配合
本来想再介绍一下watch的，发现已经这么长了，就仅说说livereload的实现吧。
watch是监视器，监听文件的改动并进行相应的动作。它有一个专门的option是用来实现网页自动刷新的功能的：livereload。是的，和上面的option是一模一样的。
那么，给出最终的代码
connect: {
options: {
port: 9000,
open: true,
hostname: 'localhost',
livereload: true //声明给 watch 监听的端口
},
livereload :{
options: {
base: [
'src'
]
}
}
},
watch: {
livereload: {
options: {
livereload: true
},
files: [
'src/{,*/}*'
]
}
}
细心就会发现，keepalive这个值不见了，因为watch的存在grunt会一直处于执行的状态，所以服务器不会终止。反倒是如果设置了keepalive为true，connect会一直阻塞，watch就不会执行，得不到想要的结果了。
欲知后事如何，且听下回分解。