Livereload可理解为即时刷新，在前端开发中，开发人员在编写或调试html/js/css代码后须要从编辑器切换到浏览器。再刷新浏览器才干看到页面变化，这样的十分频繁的操作在一定程度上影响了工作效率，而Liverelod能够帮助我们ad攻克了这个问题。
实现livereload有多种方式。能够借助Livereload软件加浏览器插件实现。也能够借助nodejs。通过gulp或者grunt这些task runner实现，但其基本原理都是一样的，即通过在本地开启一个websocket服务，检測文件变化，当文件被改动后触发livereload任务。推送消息给浏览器刷新页面。
在众多的实现方法中。相比nodejs代码实现，使用其它软件或浏览器插件显然没有必要，这里介绍gulp的实现方式，个人觉得是比較简单快捷的方式。
gulpjs 实现 livereload
首先须要安装nodejs, 再安装 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入门 (一个15分钟的介绍视频)
