查看原文: http://lufeng.me/livereload
**Livereload**可理解为即时刷新，在前端开发中，开发者在编写或调试html/js/css代码后需要从编辑器切换到浏览器，再刷新浏览器才能看到页面变化，这种十分频繁的操作在一定程度上影响了工作效率，而Liverelod可以帮助我们ad解决了这个问题。
实现livereload有多种方式，可以借助[Livereload](http://livereload.com/)软件加浏览器插件实现，也可以借助nodejs，通过gulp或者grunt这些task runner实现，但其基本原理都是一样的，即通过在本地开启一个websocket服务，检测文件变化，当文件被修改后触发livereload任务，推送消息给浏览器刷新页面。
在众多的实现方法中，相比nodejs代码实现，使用其他软件或浏览器插件显然没有必要，这里介绍gulp的实现方式，个人认为是比较简单快捷的方式。
---
##gulpjs 实现 livereload
首先需要[安装nodejs](http://nodejs.org/), 再安装 gulp， gulp-connect 模块
```
$ sudo npm install -g gulp //全局安装gulp模块
```
切换到项目根目录下
```
$ mkdir ~/gulptest && cd ~/gulptest
$ npm init
$ npm install --save-dev gulp gulp-connect
$ touch gulpfile.js
```
在项目根目录下需要有**gulpfile.js**这个文件
```
var gulp = require(‘gulp‘),
connect = require(‘gulp-connect‘);
gulp.task(‘connect‘, function() {
connect.server({
root: ‘app‘,
livereload: true
});
});
gulp.task(‘html‘, function () {
gulp.src(‘./app/*.html‘)
.pipe(connect.reload());
});
gulp.task(‘watch‘, function () {
gulp.watch([‘./app/*.html‘], [‘html‘]);
});
gulp.task(‘default‘, [‘connect‘, ‘watch‘]);
```
建立gulpfile.js文件后在根目录下运行命令：
```
$ gulp
```
即可看到本地启动了web server和livereload server，现在打开http://localhost:8080 编辑html文件保存后就可以看到浏览器自动刷新。
---
##使用yoeman generator生成已经整合livereload功能的项目脚手架
安装yeoman和相应的generator(generator-gulpx)
```
$ sudo npm install -g yo generator-gulpx
```
新建项目
```
$ mkdir ~/yogulpx/ && cd ~/yogulpx
$ sudo yo gulpx
$ gulp
```
可以看到借助yeoman generator可以很方便的构建项目，推荐使用
---
推荐观看:
[gulp入门](http://tagtree.tv/gulp) (一个15分钟的介绍视频)