grunt之connect、watch

标签：

　　先说下这两个插件配合的用处，简单的说，它们可以拯救你的F5。connect用于建立一个静态服务器，watch监听文件的修改并自动实时刷新浏览器的页面。

　　还是options走起。

　　connect(V0.9.0)的options(github地址)

1. port: 静态服务器监听的端口，默认8000
2. protocol: 协议名，支持‘http‘和‘https‘，默认‘http‘
3. hostname: 合法的主机名，默认‘0.0.0.0‘，意味着只要能ping到本机的设备都可以通过ip访问，设为‘localhost‘则仅支持本机访问
4. 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
5. 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，然后修改base
   

   base: [
       ‘src‘,
       ‘dest‘
   ]

   dest是前一回的输出目录，目录结构是这样的
   
   

   src和dest下面都有index.html，那我们通过http://localhost:9000/访问到的是哪一个呢，实际操作一下，发现是src下面的index.html，可见文件的搜索是前面的文件夹优先级更高
   我们把两个文件夹下的index.html都改为main.html，再次访问http://localhost:9000/，得到的目录结构确是dest的，可见文件夹索引的显示是后面的文件夹优先级更高
   如果我想让它显示src的目录结构，有没有办法呢？有，就是下面的option
6. directory: 默认为null，设置成‘src‘就可以完成上面的目标了
7. 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 / 200 7484 - 10.211 ms

8. 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
   }

    

9. useAvailablePort: 当端口被占用时自动换其他端口，默认为false
   我开启另外一个监听8081的服务器，然后把配置中port改为8081，执行grunt失败，打印出来的log为
   

   Running "connect:serve" (connect) task
   Waiting forever...
   Fatal error: Port 8081 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

    

10. 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
        });
    }

11. middleware: 中间件，接受function or function array作为value。
    当value为function时，传入参数connect、options、middlewares
    

    middleware : function(connect, options, middlewares) {
        return middlewares;    //当前行为保持不变
    }

    当value为function array时，传入参数request、response、next

    middleware: [function(req, res, next) {
        next();
    }]

    以上两个option涉及比较多的nodejs概念，不做详述

12. livereload: 特意把这个option放到了最后，因为这个option是实现实时刷新的核心，依赖于connect-livereload进行实现，所以将这个插件安装上先
    默认值是false，一般接受端口号作为参数，设置为true时相当于设置为39729，so
    

    connect: {
        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就不会执行，得不到想要的结果了。

　　欲知后事如何，且听下回分解。

grunt之connect、watch

标签：

原文地址：http://www.cnblogs.com/tarol/p/4242360.html