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. MariaDB删除重复记录

    不管是程序BUG,还是业务变更,重复数据这个老生常谈的问题,总是会出现.以下是我在MariaDB或是MySQL下处理的一些经验.在SQL Server中,使用窗口函数是很容易实现的.不过听说MySQL ...

  2. 【FAI】七日年化收益与万份收益的理解

    七日年化收益:其实指的一年的收益(应该忽略”七日”),这里的七日指的是取最近七日年化的结果 万份收益:每万元每天的收益 可以使用下图来清晰识别: 例子: 10000元按照5%的七日年化收益计算的话: ...

  3. Tomcat 错误代号集

    收集了一些常见的tomcat 错误代号以及附上状态代码  状态信息  含义.希望对大家有帮助. 状态代码  状态信息  含义100  Continue  初始的请求已经接受,客户应当继续发送请求的其余 ...

  4. putty简单使用

    一.Putty简介 Putty是一款轻便的远程登录工具,用它可以非常方便的登录到Linux服务器上进行各种操作(命令行方式).Putty完全免费,而且无需安装(双击即可运行),支持多种连接类型(Tel ...

  5. UpdatePanel的用法详解

    摘自:http://www.cnblogs.com/shangxia/articles/2281782.html 一.UpdatePanel的结构 <asp:ScriptManager ID=& ...

  6. useradd或者userdel相关用户管理命令不好用

    前言 有时使用useradd或者userdel会出现如下报错: userdel: cannot open /etc/passwd 很明显是/etc/passwd文件导致的 一.查看以及改变文件状态 [ ...

  7. CSS：使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

  8. 【LeetCode】41. First Missing Positive (3 solutions)

    First Missing Positive Given an unsorted integer array, find the first missing positive integer. For ...

  9. 【LeetCode】132. Palindrome Partitioning II

    Palindrome Partitioning II  Given a string s, partition s such that every substring of the partition ...

  10. 通俗易懂，C#如何安全、高效地玩转任何种类的内存之Span的脾气秉性(二)。 异步委托 微信小程序支付证书及SSL证书使用 SqlServer无备份下误删数据恢复 把list集合的内容写入到Xml中，通过XmlDocument方式写入Xml文件中 通过XDocument方式把List写入Xml文件

    通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的脾气秉性(二).   前言 读完上篇<通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的本质(一).>,相信大家对sp ...