首页 > 代码库 > grunt之connect、watch

grunt之connect、watch

2024-11-14 12:42:39   203人阅读

　　先说下这两个插件配合的用处，简单的说，它们可以拯救你的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) taskStarted connect web server on http://localhost:9000Done, 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) taskWaiting 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) taskWaiting 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) taskWaiting forever...Fatal error: Port 8081 is already in use by another process.

    设置此option为true，再次执行，自动换到了8082端口

    Running "connect:serve" (connect) taskWaiting 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="http://‘ + (location.hostname || ‘localhost‘) + ‘:35729/livereload.js?snipver=1"><\/script>‘)//]]></script><script src="http://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


联系
我们