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. Android——SD卡工具类——SDCardUtils.java

    package com.xdsjs.save.utils; /** * SD卡相关的辅助类 * Created by xdsjs on 2015/10/13. */ import java.io.Fi ...

  2. Android自动填写获取到的验证码

    Android需要添加的相关权限 <uses-permission android:name="android.permission.RECEIVE_SMS">< ...

  3. Nginx随笔

    1.用于代理与反代理,处理大量请求的工具. 2.主要有三大模块:handle.upstream.过滤模块.handle用于在nginx内部接到请求并进行处理的状况:upstream用于需要nginx接 ...

  4. jquery遍历集合&数组&标签

      jquery遍历集合&数组的两种方式 CreateTime--2017年4月24日08:31:49Author:Marydon 方法一: $(function(){ $("inp ...

  5. java中的Checked Exception和Unchecked Exception的区别

    Java 定义了两种异常: - Checked exception: 继承自 Exception 类是 checked exception.代码需要处理 API 抛出的 checked excepti ...

  6. 6种.net分布式缓存解决方式

    6种.net分布式缓存解决方式 1.     使用内置ASP.NET Cache (System.Web.Caching) : https://msdn.microsoft.com/en-us/lib ...

  7. HashTable、List、ArrayList的经典使用和相互转换

    1.添加引用 using System.Collections; 2.创建并添加数据 Hashtable hs = new Hashtable(); hs.Add("Name1", ...

  8. iOS获取本地沙盒视频封面图片（含swift实现）

    最近做了个小应用,有涉及到本地视频播放及列表显示. 其中一个知识点就是获取本地存储视频,用来界面中的封面显示. 记录如下: //videoURL:本地视频路径 time:用来控制视频播放的时间点图片截 ...

  9. Android学习系列(9)--App列表之分组ListView

    吸引用户的眼球,是我们至死不渝的追求:      第一时间呈现最有价值的信息,简明大方,告诉客户,你的选择是多么的明智,这正是你寻觅已久的东西.       分组的应用场合还是很多的,有数据集合的地方 ...

  10. 【php】基础学习3

    本节主要是php中函数的学习: <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Con ...