利用grunt ,实现对修改的文件自动加载
2013-04-27 17:36
316 查看
why?
每次修改文件,为了看到修改后的效果,我们不得不每次F5刷新,有没有办法可以做到当文件修改时,浏览器能自动刷新呢?
chrome 中有插件:livereload .
what?
今天,我们通过grunt 的几个任务,实现修改本地文件,在浏览器中,自动刷新的功能。
我们要用到下面三个任务:
1 grunt-contrib-connect 为文件建立站点,实现通过浏览器访问文件的功能
2 grunt-regarde 监控哪些文件发生变化,当变化发生时,执行设定的任务
3 grunt-contrib-livereload 建立web socket 服务器,让页面同web socket 通行
通过上面的简单介绍,我们大致就能推理出,用grunt 任务怎么实现修改文件在浏览器中自动加载的:
通过connect 建立站点,利用regarde监控被修改的文件,触发livereload 的任务,livereload 通过web socket ,将与服务器相连接的页面都刷新一次
how?
这里理解的难点在于,怎样使connect 建立的站点文件,包含同livereload 建立的web socket 服务器通信的过程
这里的关键在于,connect 的配置中加入中间件工作,他的作用是在每个打开的页面中,执行lrSnippet 函数,这个函数的作用是什么呢?
上面是从lrSnippet 函数中copy出来的一个变量,他的作用是在返回的页面中,document.write 这个字符串,这样,就引入了livereload 的一个js。在这个js中,为页面建立了同web socket 服务器的web socket 功能。
这样,当服务器发现文件修改了,就能通过web socket 通知客户端,从而实现自动刷新功能
参考:http://gruntjs.com/getting-started#the-wrapper-function
http://gruntjs.com/configuring-tasks
https://github.com/yeoman/grunt-regarde
https://github.com/gruntjs/grunt-contrib-connect
https://github.com/gruntjs/grunt-contrib-livereload
每次修改文件,为了看到修改后的效果,我们不得不每次F5刷新,有没有办法可以做到当文件修改时,浏览器能自动刷新呢?
chrome 中有插件:livereload .
what?
今天,我们通过grunt 的几个任务,实现修改本地文件,在浏览器中,自动刷新的功能。
我们要用到下面三个任务:
1 grunt-contrib-connect 为文件建立站点,实现通过浏览器访问文件的功能
2 grunt-regarde 监控哪些文件发生变化,当变化发生时,执行设定的任务
3 grunt-contrib-livereload 建立web socket 服务器,让页面同web socket 通行
通过上面的简单介绍,我们大致就能推理出,用grunt 任务怎么实现修改文件在浏览器中自动加载的:
通过connect 建立站点,利用regarde监控被修改的文件,触发livereload 的任务,livereload 通过web socket ,将与服务器相连接的页面都刷新一次
how?
这里理解的难点在于,怎样使connect 建立的站点文件,包含同livereload 建立的web socket 服务器通信的过程
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet; var folderMount = function folderMount(connect, point) { return connect.static(path.resolve(point)); }; grunt.initConfig({ connect:{ server:{ options: { port: 9001, base:'./src', middleware: function(connect, options) { return [lrSnippet, folderMount(connect, options.base)] } } } } })
这里的关键在于,connect 的配置中加入中间件工作,他的作用是在每个打开的页面中,执行lrSnippet 函数,这个函数的作用是什么呢?
var snippet = [ "<!-- livereload snippet -->", "<script>document.write('<script src=\"http://'", " + (location.host || 'localhost').split(':')[0]", " + ':" + port + "/livereload.js?snipver=1\"><\\/script>')", "</script>", "" ].join('\n');
上面是从lrSnippet 函数中copy出来的一个变量,他的作用是在返回的页面中,document.write 这个字符串,这样,就引入了livereload 的一个js。在这个js中,为页面建立了同web socket 服务器的web socket 功能。
这样,当服务器发现文件修改了,就能通过web socket 通知客户端,从而实现自动刷新功能
参考:http://gruntjs.com/getting-started#the-wrapper-function
http://gruntjs.com/configuring-tasks
https://github.com/yeoman/grunt-regarde
https://github.com/gruntjs/grunt-contrib-connect
https://github.com/gruntjs/grunt-contrib-livereload
相关文章推荐
- 通过修改配置文件实现tomcat的自动加载
- 文件修改自动重新加载内容技术实现
- 利用Browsersync实现快速测试。(修改文件自动刷新,避免手动f5)
- apache commons configuration自动加载修改的配置文件不用重启服务器
- 如何实现SVN导出某段时间修改过的文件;自动将class文件部署到服务器中;重启服务器
- webpack热加载:修改文件自动刷新浏览器并更新
- 利用java反射机制 读取配置文件 实现动态类加载以及动态类型转换
- 实现MyBatis Mapper XML文件增量动态刷新,自动加载,热加载,热部署
- 利用计划任务和VBS脚本实现自动WEB共享文件夹里的文件
- IntelliJ IDEA自动加载修改的文件内容
- 利用Selenium Webdriver 2.0 实现从Web自动保存文件到本地
- PHP实现抓取Google IP并自动修改hosts文件
- 如何利用eclipse实现批量修改文件的编码方式
- windows 下利用 winrar 和 计划任务实现文件的自动备份
- linux(以ubuntu为例)下Android利用ant自动编译、修改配置文件、批量多渠道,打包生
- windows下Android利用ant自动编译、修改配置文件、批量多渠道,打包生成apk文件
- 利用PHP的debug_backtrace函数,实现PHP文件权限管理、动态加载
- Windows中利用计划任务实现自动备份文件
- 实现MyBatis Mapper XML文件增量动态刷新,自动加载,热加载,热部署
- Java实现的properties文件动态修改并自动保存工具类