前言
正如上图所示，使用 gulp-livereload，可以实时保存刷新，那样就不用按F5和切换界面了，无形中省了好多时间，有没有！：D
- Gulp.js：比
Grunt更简单的自动化项目构建工具 - gulp-livereload：顾名思义，这是 Gulp.js 中的
其中一个插件，本文的主题就是它了。
安装
第一步：全局安装gulp 和 当前目录部署 gulp 和 gulp-livereload
npm install gulp -g
npm install gulp gulp-livereload --save-dev
第二步：安装 chrome 插件，点我就去安装
使用
第一步： 当前目录新建 gulpfile.js 文件，写入以下代码。
var gulp = require('gulp'),
livereload = require('gulp-livereload');
gulp.task('watch', function () { // 这里的watch，是自定义的，写成live或者别的也行
var server = livereload();
// app/**/*.*的意思是 app文件夹下的 任何文件夹 的 任何文件
gulp.watch('app/**/*.*', function (file) {
server.changed(file.path);
});
});
第二步： 命令行下运行
gulp watch
此时，你会发现当你修改 app 文件夹下的任何文件，命令行都会有内容输出，说明能够监控到文件的变化，运作正常了。
第三步： 以服务器的方式打开页面，例如 localhost:3000，而不是 file:///F:/web/app/index.html
接着点击刚刚安装的 chrome插件 ，中间变为实心黑色圆点表示开始运作了。
现在只要文件一保存，浏览器就会马上刷新了。
技术： node.js+npm
扩展： Gulp.js—比Grunt更易用的前端构建工具
时间： 2014年4月
我的博客： think2011
后续
目前楼主的用的方式更简单一些。
npm i livereload -g
之后在任何目录下执行 livereload ，并打开浏览器的插件即可。
回复 (29)
如果是搭配gulp使用的话，推荐使用browserSync，更方便。 +1
livereload在我的电脑无法起作用,用browserSync就行
browserSync 是不支持 POST 的 ajax 么？（挖下坟）
现在这么调用：
var gulp = require('gulp'),
less = require('gulp-less');
var livereload = require('gulp-livereload');
gulp.task('less', function() {
gulp.src(['frontend-tech/webIndexPage/*.less'])
.pipe(less())
.pipe(gulp.dest('frontend-tech/webIndexPage/src'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('frontend-tech/webIndexPage/*.less', ['less']);
});
https://github.com/gaearon/react-hot-loader https://github.com/gaearon/react-transform-boilerplate
这才是我想要的：
<竟然是两年前的老帖子。。。。。>
也就设计在编写静态HTML能用，开发全是动态的东西，然并卵
live-server 就能
同意25楼
用webpack-hot-reload甚至不用刷新
被挖坟了
问下楼主，这个GIF是咋整出来的呀？
赞一个.
doodle的插件是参照这个写的么
这个好适用
@hzplay soga
直接用webstorm阿
补充一下关于第三步的
第三步：以服务器的方式打开页面，例如 localhost:3000，而不是 file:///F:/web/app/index.html
可以用http-server这个npm来实现
其实可以不装chrome插件就可以的
- 可以设置sublime离开编辑器自动保存
- 似乎这个更强悍些哈。 多设备自动同步操作的：http://www.browsersync.io/
感谢楼主的分享，之前其实早就用上了，但是没有注意插件上的那个按钮，看了楼主的gif小图才明白自己忘了点了！
另外新版本有新的用法了，livereload.listen()以后，可以直接pipe需要改动后刷新的那个管道到livereload()上去，不用watch了。当然以前的方法也可以使用，不过api变动了一些
服务端主动通知，WebSocket ?
怎么用服务器方式打开呢？ 为什么我的localhost:3000无法访问？
截图用什么软件弄的?
我能发一个广告么？ 我写的 f2e-server 里面也有相关的功能，有关插件安装部分的文档描述正好跟你这个互补。 http://f2e-server.com/other.html#crx
如果是搭配gulp使用的话，推荐使用browserSync，更方便。
@CosWInd Doodle 那时候我还不会用 LiveReload 呢