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. 笔试题之j2ee

    j2ee部分 1.BS与CS的联系与区别. C/S是Client/Server的缩写.服务器通常采用高性能的PC.工作站或小型机,并采用大型数据库系统,如Oracle.Sybase.InFORMix或 ...

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

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

  3. sublime 格式化XML文件

    下载插件 下载下来后将其解压到D:\tools\Sublime Text 3109\Data\Packages 打开sublime,preferences->browse packages,会弹 ...

  4. 【Android开发经验】Cannot generate texture from bitmap异常的解决方式

    异常现象: 今天在处理用户头像的过程中,由于头像的处理比較复杂,由于,没有使用afinal自带的自己主动载入.而是自己依据头像的下载路径.手动进行下载和使用.可是在手动回收bitmap对象的过程中,会 ...

  5. jquery-序列化表单

      createTime--2016年9月25日08:54:48参考链接:http://www.w3school.com.cn/tags/html_ref_urlencode.htmljQuery的s ...

  6. ASP.NET 性能监控和优化入门

    关键要点: 只有与应用指标相关联,基础设施指标才能最大发挥作用. 高效性能优化的关键在于性能数据. 一些APM工具为ASP.NET提供了开箱即用的支持,这样入门使用ASP.NET仅需最小限度的初始设置 ...

  7. CUDA 7.0 速查手册

    Create by Jane/Santaizi 03:57:00 3/14/2016 All right reserved. 速查手册基于 CUDA 7.0 toolkit documentation ...

  8. 2、classpath、path、JAVA_HOME的作用

    windows xp下配置JDK环境变量: 1.安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为D:\java\jdk1.5.0_08: 2.安装完成后,右击“我的电脑”,点击“ ...

  9. nodejs实现拉钩网爬虫

    概述 通过nodejs+mysql+cheerio+request实现拉钩网特定公司的所有招聘信息的抓取,并将抓取的信息保存到数据库中.抓取内容包括:薪酬福利,工作地,职位要求,工作性质等几乎所有的内 ...

  10. Java IO 要点总结

    Java 流在处理上分为字符流和字节流.字符流处理的单元为 2 个字节的 Unicode 字符,分别操作字符.字符数组或字符串,而字节流处理单元为 1 个字节,操作字节和字节数组. Java 内用 U ...