LiveReload可以理解为即时刷新，在前端开发中，开发者在编写或调试html/js/css代码后需要从编辑器切换到浏览器，再刷新浏览器才能看到页面变化，这种频繁的操作在一定程度上影响了工作效率，而LiveReload可以帮助我们解决了这个问题。

　　实现原理：通过在本地开启一个websocket服务，检测文件变化，当文件被修改后触发livereload任务，推送消息给浏览器刷新页面。

　　安装gulp-connect插件

　　npm install gulp-connect

　　配置代码

[gulp入门]gulp-connect浏览器自动刷新的更多相关文章

  1. 使用gulp和browser-sync实现浏览器自动刷新

    安装gulp (前提是已经安装了node) 全局安装: npm install -g gulp 本项目安装: npm install gulp --save-dev 安装browser-sync 全局 ...

  2. gulp最佳实践（包含js,css,html预编译，合并，压缩,浏览器自动刷新）

    gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...

  3. 前端-如何用gulp快速搭建项目（sass预编译，代码压缩，css前缀，浏览器自动刷新，雪碧图合成）

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  4. 前端神器！！gulp livereload实现浏览器自动刷新

    首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下gulp安装流程: 1:全局安装gulp,操作为: npm inst ...

  5. Gulp 搭建前端非SPA 项目， 修改文件浏览器自动刷新

    起因:需要搭建一个自动打包处理 sass / js (es6),自动监听文件变化时浏览器自动刷新的开发环境 项目目录 project build -css -js *.html src -html - ...

  6. Webpack 2 视频教程 007 - 配置 WDS 进行浏览器自动刷新

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  7. 浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。

    本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我 ...

  8. gulp构建前端，压缩css，js文件，实现浏览器自动刷新

    一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...

  9. gulp 自动化构建html项目--自动刷新

    使用gulp自动化构建项目是前端学习的重要部分,gulp依赖于node.js.首选电脑要配置node和npm. 查看node版本号 node --version 查看npm 版本 npm --vers ...

  10. Gulp 项目简单构建，自动刷新页面

    /** * Created by 1900 on 12/18/2015. */ var plugins={ fs:require("fs"), gulp:require(" ...

随机推荐

  1. 修改终端下vim的PopupMenu选种项的背景颜色

    我平常比较喜欢使用终端下的 VIM,最方便的就是随时可以使用ctrl+z切换到终端下执行命令, 然后再通过fg切换回 VIM.如果再有个透明效果,那就更赞了.不过最近换了一个配色ron 后, 有个比较 ...

  2. fread与read的差别（文件io补充）

    这里有一个我们常常提出的问题就是fread,read的差别.(当然这两个分别代表了操作文件系统的两套不同的函数,包含open,read, write, seek 等). 一.他们的差别就是一个(rea ...

  3. 如何在MyEclipse中建立一个代理服务器

    一.什么是 TCP/IP Monitor TCP/IP monitor 是可以监控在某个端口上通过 TCP/IP 协议传送的通信数据的一个工具软件. TCP/IP monitor 工具,通过一些配置, ...

  4. Loadrunner脚本编程（1）-大体思路

    http://www.360doc.com/content/10/0806/13/1698198_44076570.shtml 就目前的了解.Loadrunner的脚本语言其实和C没什么区别.他内部的 ...

  5. 訪问可能没有定义的data (通过static类型flash.net:FileReference引用)

    今天使用Flex实现了图片预览及其上传的功能,在整个开发过程中遇到了"訪问可能没有定义的data (通过static类型flash.net:FileReference引用)"错误, ...

  6. TP3.2设置URL伪静态满足更好的SEO效果

    URL伪静态通常是为了满足更好的SEO效果,ThinkPHP支持伪静态URL设置,可以通过设置URL_HTML_SUFFIX参数随意在URL的最后增加你想要的静态后缀,而不会影响当前操作的正常执行. ...

  7. Log4Net的概念和使用

    第一篇文本日志 log4net简介: log4net简介: log4net是一个功能著名的开源日志记录组件,由java平台而来. 利用log4net可以方便地将日志信息记录到文件.控制台.Window ...

  8. Oracle SQL Developer，Oracle 开发工具之toad、SQL Developer、PL/SQL Developer等比较

    参考: oracle 的几个开发工具比较 因Oracle几乎是中大型商业企业数据的首选,所以比较一下常用与Oracle的工具. Oracle SQL Developer 免费,一般开发使用足矣,常用. ...

  9. Oracle自定义函数和存储过程示例，自定义函数与存储过程区别

    参考资料:http://www.newbooks.com.cn/info/60861.html oracle自定义函数学习和连接运算符(||) 贴一段中文文档示例,应该就可以开始工作了: --过程(P ...

  10. Android——Intent动作汇总（转）

    String ADD_SHORTCUT_ACTION 动作:在系统中添加一个快捷方式.. "android.intent.action.ADD_SHORTCUT" String A ...