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;