livereload

livereload

livereload是一个web开发辅助工具，当我们修改完html、css和js的时候会自动刷新浏览器，不需要再F5了。这样在双屏切图、写js代码的时候会提高很多效率；

livereload是基于html5的websocket实现的；
livereload在访问的web页面中插入一段socket套接字代码(javascript语言编写)，这段代码与livereload服务器端socket建立链接；并等待与执行类似“reload css/styles.css”的指令。

如何插入socket套接字代码

下面列出了三种方式，在web页面中插入必要的socket套接字代码：

• 通过浏览器插件
• 通过服务器中间件
• 手动在页面中<script src=""></script>引入

服务器中间件：就是在网页请求到达http服务器和网页响应返回客户端（浏览器）之间，服务器中间件对网页进行加工处理，比如插入一段javascript脚本；

livereload在windows or mac中的应用

livereload在windows和mac中都有相关的app应用，可阅读以下文档来获取更多帮助：
How do I start using LiveReload

livereload在gulp中的应用

gulp工具集中有livereload的实现；
有两类工具：

• 需要浏览器插件配合来插入socket套接字的实现，比如gulp-livereload
• 以服务器中间件来插入socket套接字的实现，比如gulp-server-livereload

livereload在grunt中的应用

同样，grunt也存在上述两类工具：

• grunt-contrib-watch，配合浏览器插件，实现livereload的功能；
• grunt-contrib-connect（http服务器） & connect-livereload（中间件） 实现livereload;

gulp-livereload使用介绍

参考 Gulp.js-livereload 不用F5了，实时自动刷新页面来开发