- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端开发
web 应用本地开发中的 LiveReload 协议深度解析
LiveReload 协议缘起与概览LiveReload 是一种在前端本地开发中实现浏览器自动刷新的生产力工具。 协议设计与核心原理LiveReload 协议基于标准的 WebSocket 通信，在单一端口上同时支持 HTTP 与 WebSocket 服务：HTTP 用于提供客户端脚本 livereload.js， 本地集成示例可以通过两种方式将 LiveReload 集成到页面中：浏览器扩展：安装官方 LiveReload 插件后，点击工具栏图标即可连接至本地服务器 (livereload - NPM)。 Python 的 python-livereload 提供了类似接口，通过 Server.watch 注册文件监控并自动注入脚本 (Livereload, the simple tool that can Remix 内置 LiveReload 组件，允许指定自定义端口与源地址，实现开发者体验与协议一致性 (LiveReload - Remix, LiveReload – Remix Component
25310编辑于 2025-07-10 - 来自专栏饶文津的专栏
Sublime text3 插件LiveReload 实现实时预览
1.首先要安装插件LiveReload Sublime text3。 菜单 preferences->packages control，输入install.. 回车，输入LiveReload回车。 3、 在sublime text3 配置LiveReload。preferences -> Packge Settings -> LiveReload -> Settings - Default。
1.4K20发布于 2020-06-02 - 来自专栏零域Blog
Sublime Text3 无法使用LiveReload插件的解决方法
安装LiveReload chrome 1.在chrome浏览器中安装扩展插件LiveReload，安装完成后，可看到右上角出现livereload图标， 2.进入chrome扩展程序页面，将livereload 中的允许访问文件网址打上勾 sublime安装LiveReload sublime text3的package control中的livereload插件存在bug, 不知道什么时候能够修复 windows https://github.com/Grafikart/ST3-LiveReload 可以从上面地址下载到可用的livereload，直接下载到本地或clone均可 你会得到一个插件包，将该文件夹重命名为 -> Packge Settings -> LiveReload -> Settings - User Linux preferences -> Packge Settings -> LiveReload 最后 例如，打开某个html文件，在chrome中打开，点击LiveReload图标，可以看到中心由空心圆点变为实心圆点，代表启动成功，这时返回sublime中，可以看到左下角出现LiveReload连接成功的提示
90230编辑于 2022-03-22 - 来自专栏菩提树下的杨过
spring-boot 速成(2) devtools之热部署及LiveReload
秘密就在于spring-boot-devtools在应用启动时，自带了一个LiveReload Service，参考下面的截图： ? 那么，浏览器怎么做到实时与LiveReload的Service保持实时内容同步呢？ 当然，要安装插件，chrome的应用商店里搜索LiveReload免费插件安装即可（需要反抢，你懂的），在调试时，只要激活该插件，页面就会与LiveReload建立websocket的长链接，参考下图： 同时，如果查看本机建立的livereload端口连接情况，也可以印证这一点： ? 1个启动的应用会有LiveReload Server，后面的应用livereload不管用（这也很容易理解，如果1台机器上有多个livereload server，浏览器的livereload 插件，估计也不太好判断该连哪个
1.3K80发布于 2018-01-18 - 来自专栏破晓之歌
前端页面可视化开发-livestyle,livereload,browser-sync
(支持css，sass，less，html，js，图片等) 本质是监控文件修改，实时刷新浏览器，需要安装livereload插件和node.js插件，全局刷新 安装本地插件： npm install -g livereload 如果安装不成功，可以使用如下命令： sudo npm install -g livereload 在文件加下启动livereload node.js的包名，版本，依赖等信息 编写gulp脚本： var gulp = require("gulp"); var livereload = require("gulp-livereload gulp 安装glup-livereload npm install gulp-livereload --save -dev --save -dev 这种方式，安装成功后，会在 = require("gulp-livereload"); var browserSync = require("browser-sync"); gulp.task('watch',function
1.5K20发布于 2018-08-15 - 来自专栏菩提树下的杨过
spring-boot 速成(2) devtools之热部署及LiveReload
秘密就在于spring-boot-devtools在应用启动时，自带了一个LiveReload Service，参考下面的截图： ? 那么，浏览器怎么做到实时与LiveReload的Service保持实时内容同步呢？ 当然，要安装插件，chrome的应用商店里搜索LiveReload免费插件安装即可（需要反抢，你懂的），在调试时，只要激活该插件，页面就会与LiveReload建立websocket的长链接，参考下图： 同时，如果查看本机建立的livereload端口连接情况，也可以印证这一点： ? 1个启动的应用会有LiveReload Server，后面的应用livereload不管用（这也很容易理解，如果1台机器上有多个livereload server，浏览器的livereload 插件，估计也不太好判断该连哪个
1.3K60发布于 2018-01-18 - 来自专栏Java周某人
谁说Spring Boot 修改静态资源一定要重启项目才会生效，我看未必
LiveReload 可以帮助我们实现这一功能！ LiveReload devtools 中默认嵌入了 LiveReload 服务器，利用 LiveReload 可以实现静态文件的热部署，LiveReload 可以在资源发生变化时自动触发浏览器更新，LiveReload 图标 在浏览器中打开项目的页面，然后点击浏览器右上角的 LiveReload 按钮，打开 LiveReload 连接。 注意： LiveReload 是和浏览器选项卡绑定在一起的，在哪个选项卡中打开了 LiveReload，就在哪个选项卡中访问页面，这样才有效果。 LiveReload 所耗费的时间。
1.3K00发布于 2019-09-27 - 来自专栏玩转JavaEE
Spring Boot2 系列教程(三十九)Spring Boot 热部署
LiveReload 可以帮助我们实现这一功能！ LiveReload devtools 中默认嵌入了 LiveReload 服务器，利用 LiveReload 可以实现静态文件的热部署，LiveReload 可以在资源发生变化时自动触发浏览器更新，LiveReload 在浏览器中打开项目的页面，然后点击浏览器右上角的 LiveReload 按钮，打开 LiveReload 连接。 注意： LiveReload 是和浏览器选项卡绑定在一起的，在哪个选项卡中打开了 LiveReload，就在哪个选项卡中访问页面，这样才有效果。 LiveReload 所耗费的时间。
1K10发布于 2019-12-18 - 来自专栏DevOps
SpringBoot开发利刃之热部署原理及最优实践
3.livereload简介 在devtools模块中包含一个嵌入的livereload服务器，可以在资源变化时用来触发浏览器刷新。 livereload 通过引入的脚本livereload.js在 livereload 服务和浏览器之间建立了一个 WebSocket 连接。 我们的浏览器需要在http://livereload.com网站下载安装扩展插件。 插件 下载livereload插件，将其安装到chrome扩展程序中，并选中允许访问文件网址。 4.3 修改静态文件（html、css等） 应用不会重启，但是会调用livereload，浏览器会自动刷新，显示最新的修改内容。
81210编辑于 2024-03-29 - 来自专栏玩转JavaEE
Spring Boot 修改静态资源一定要重启项目才会生效吗？未必！
LiveReload 可以帮助我们实现这一功能！ LiveReload devtools 中默认嵌入了 LiveReload 服务器，利用 LiveReload 可以实现静态文件的热部署，LiveReload 可以在资源发生变化时自动触发浏览器更新，LiveReload 在浏览器中打开项目的页面，然后点击浏览器右上角的 LiveReload 按钮，打开 LiveReload 连接。 注意： LiveReload 是和浏览器选项卡绑定在一起的，在哪个选项卡中打开了 LiveReload，就在哪个选项卡中访问页面，这样才有效果。 LiveReload 所耗费的时间。
2.1K20发布于 2019-08-09 - 来自专栏Tips
SublimeText配置Markdown编辑及预览
所需工具 Sublime Text + Package Control 插件：Markdown Editing 插件：Markdown Preview 插件：LiveReload 浏览器 具体步骤 1 ctrl + shift + P`调出控制台，选择`Package Control: Install Packge 分别搜索并安装三个插件：MarkdownEditing，MarkdownPreview，LiveReload Preferences -> Package Settings -> Markdown Preview -> Settings 添加以下内容： "enable\_autoreload": true, 启动LiveReload ctrl + shift + P，输入LiveReload: Enable/disable plug-ins，选择Enable: Simple Reload。
88121编辑于 2024-09-16 - 来自专栏Java学习网
微服务架构之Spring Boot（十八）
20.3 LiveReload spring-boot-devtools 模块包括一个嵌入式LiveReload服务器，可用于在更改资源时触发浏览器刷新。 LiveReload浏览器扩展程序可从 livereload.com免费用于Chrome，Firefox和Safari 。 如果您不想在应用程序运行时启动LiveReload服务器，则可以将 spring.devtools.livereload.enabled 属性设置为 false 。 您一次只能运行一个LiveReload服务器。在启动应用程序之前，请确保没有其他LiveReload服务器正在运行。如果从IDE启动多个 应用程序，则只有第一个具有LiveReload支持。
60620编辑于 2022-04-07 - 来自专栏小古哥的博客园
gulp的安装和使用
gulp-jshint gulp-uglify gulp-imagemin gulp-rename gulp-concat gulp-htmlmin gulp-notify gulp-cache gulp-livereload notify = require('gulp-notify'),//显示信息 18 cache = require('gulp-cache'),//压缩图片过滤（仅修改图片压缩） 19 livereload = require('gulp-livereload');// 网页自动刷新 20 21 //处理样式 22 gulp.task('styles', function() { var timestamp server 84 livereload.listen(); 85 // Watch any files in assets/, reload on change 86 gulp.watch (['style/**/*.scss','script/**/*.js']).on('change', livereload.changed); 87 }); 9、执行gulp，命令行指定项目目录后执行
1.6K50发布于 2018-03-08 - 来自专栏生如夏花绚烂
Gulp基本使用
/src/*.js']); const livereload = require('gulp-livereload'); //打包函数 let js = function js(done){ /build/js')) .pipe(livereload()); console.log(`File was changed`); done() } //监听文件 function watch(){ livereload.listen(); gulp.watch('. /index.html']).on('change',function(path){ livereload.changed(path) }) } exports.default * cnpm i -g http-server * cnpm i gulp-livereload -D * 安装插件 */
1.3K10编辑于 2022-09-08 - 来自专栏北京马哥教育
现代Web页面开发流程
避免重复劳动 上边提到的频繁的F5刷新，可以通过LiveReload+Guard两个工具的组合来解决。LiveReload是一个浏览器的插件，通过协议与后台的服务器进行通信。 当后台文件发生变化时，LiveReload会自动刷新页面。 Guard会使用操作系统的API来感知本地文件的变化，当文件变化后，它可以通知LiveReload进行刷新，当然Guard可以做其他一些事情，比如等SCSS发生变化时，自动编译CSS等。 我在Github上公开了一个样板工程，这是一个开箱即用的工程，其中提供了这样一些配置： SCSS的编译环境（使用compass） Guard配置（当你的SCSS文件或者HTML文件修改之后，自动通知LiveReload guard 'livereload' do watch('index.html') watch(%r{stylesheets/.+\.(css)}) watch(%r{scripts/.+\.
1.2K120发布于 2018-05-03 - 来自专栏阿杜的世界
前端开发：工具和流程
Guard + LiveReload Guard是一个命令行工具，可以检测到本地文件的修改，并且可以触发一些命令。 Guard的监控规则通过Guardfile来定义，例如： guard 'livereload' do watch('index.html') watch(%r{stylesheets/.+\. (js)}) end guard: compass LiveReload是一个浏览器插件，它可以跟后台的guard服务通信：当guard检测到页面有改动时，则会通知该插件，然后该插件会自动刷新页面。 假设你已经在浏览器中安装了Livereload，并单击LiveReload图标，那么在guard后台会出现“Browser connected”字样，就说明guard服务和Livereload插件已经建立连接了
74420发布于 2018-08-06 - 来自专栏前端技术分享
rollup环境搭建（es6转es5、压缩、本地服务器、热更新）
preset-env": "^7.10.2", "rollup": "^2.15.0", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-livereload babel核心实现 @babel/preset-env：es6转es5，使用这个包要基于 @babel/core rollup-plugin-babel：babel 插件 rollup-plugin-livereload rollup-plugin-babel'; import {uglify} from 'rollup-plugin-uglify'; import serve from 'rollup-plugin-serve'; import livereload from 'rollup-plugin-livereload'; export default { input: 'src/index.js', // 入口文件 output: { babel({ exclude: "node_modules/**" }), // 压缩代码 uglify(), // 热更新 默认监听根文件夹 livereload
4.1K21发布于 2020-08-22 - 来自专栏kl的专栏
Yeoman 生成的 Angular 脚手架详解
hostname: 'localhost' , livereload: 35729 }, livereload: { options: { open: true , options.livereload 设置为 true 或者端口号，表示使用 connect-livereload 在你的页面中注入 live reload 脚本。 : { options: { livereload: '<%= connect.options.livereload %>' }, files: [ '<%= yeoman.app {png,jpg,jpeg,gif,webp,svg}' ] } } options.livereload 目标中通过 options.livereload 启用实时加载，使用的是 connect 任务的 livereload 配置。
86010编辑于 2023-11-17 - 来自专栏前端儿
前端自动化工具 -- Gulp 使用简介
= require('gulp-livereload'), del = require('del'); 然后，新建一个任务： gulp.task('styles',function(){ /static/style/test.scss',['styles']); livereload.listen(); gulp.watch('. /build/static/test.min.css').on('change',livereload.changed); }); 解析：第二行是指监听那个scss文件，如果有改动就执行styles的那个任务 ps: 不过默认情况下可能还是无法监听的，有两种方法： 装上 liveReload 插件(比如chrome上） 给html代码添加上：参考 <script>document.write ('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/<em>livereload</em>.js?
1.6K21发布于 2018-09-03 - 来自专栏跨平台全栈俱乐部
前端工程化篇之 Gulp
require("gulp-rename"); //重命名文件的包 const less = require('gulp-less'); // 识别less文件的gulp的包 const livereload = require('gulp-livereload'); //监控文件的包 const connect = require('gulp-connect'); // 热更新的包 const ['@babel/preset-env'] //此处需要修改，官网有误 })) // 输出出去 .pipe(gulp.dest('build/js')) .pipe(livereload /build/css')) .pipe(livereload()); }); // 压缩css gulp.task('css', function () { return gulp.src (); // 开启服务器 connect.server({ name: 'Dev App', root: ['build'], port: 3000, livereload
1.6K10发布于 2019-08-02
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号