从网上搜索的结果来看，并没有完整的livereload插件的应用方法；通过实践验证，得出livereload完整的用法。

livereload的功能是什么？

它能使你在编辑器里按下保存的那一刻，实时自动刷新页面（当然，有一些夸张，至少我用着有些延时…）

怎么用？

安装

第一步：拥有node环境，全局安装gulp和在当前工作目录下安装gulp、gulp-livereload、http-server；

npm install gulp -gnpm install gulp --save-devnpm install gulp-livereload --save-devnpm install http-server --save-dev

第二步：安装chrome插件，；

//需要翻墙，可以百度一下liveReload chrome插件,另行安装第三步：安装livereload客户端，；

第四步：本人在windows下进行的，其他系统如有问题，概不负责……不负责…….

livereload添加监听文件

点击add添加或者直接拖拽文件夹即可，其它的配置无用，我不管；

gulpfile.js配置

以下是我的配置文件：

var gulp = require('gulp');var plugins = require('gulp-load-plugins')(); var paths = {    styles:['app/scss/**/*.scss'],    outSytles:'app/css',    images: ['images/**','oa/images/**']}; gulp.task('scss',function(){     return gulp.src(paths.styles)        .pipe(plugins.changed(paths.outSytles))        .pipe(plugins.sourcemaps.init())        .pipe(plugins.sass())        .pipe(plugins.autoprefixer({            browsers: ['>1%'],            cascade: false,            remove:false        }))        .pipe(plugins.minifyCss())        .pipe(plugins.sourcemaps.write())        .pipe(gulp.dest(paths.outSytles))        .pipe(plugins.livereload());}); gulp.task('watch', function() {     gulp.watch(['app/**']).on('change', plugins.livereload.changed);    gulp.watch(paths.styles, ['scss']);}); gulp.task('default',['watch','scss']);

执行任务

第一步：执行http-server；

http-server

启动后显示：

E:\workplaces\svn\university>http-serverStarting up http-server, serving ./Available on:  http://192.168.0.172:8080  http://192.168.120.1:8080  http://192.168.86.1:8080  http://127.0.0.1:8080Hit CTRL-C to stop the server

第二步：再开一个node黑窗口，运行gulp；

gulp

开启chrome插件

实心圆是开启；空心圆是关闭；

通过访问项目，这是node环境提供的http服务；

此时，你会发现当你修改 app 文件夹下的任何文件（包括html），命令行都会有内容输出，说明能够监控到文件的变化，运作正常了；

严重推荐

以上是gulp官网讲述的实时刷新的方式，太过于麻烦，不推荐使用，可以选择替代品；

比如：