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了,实时自动刷新页面来开发

    原文作者:common
    原文地址: https://www.jianshu.com/p/42ca2ab73fbc
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞