gulp之livereload自动刷新页面

在前端开发中，我们会频繁修改HTML，CSS，js文件，然后刷新页面，看效果，然后再调整，再刷新，不知不觉浪费掉我们很多时间。寻找了很长时间，发现了livereload工具。这个工具能够检测本地文件（html、css、js）的变化，自动刷新浏览器页面，大大减轻了刷新页面的工作量。

1.安装chrome插件

到chrome商店，下载安装livereload插件

2.安装livereload模块

首先通过npm安装livereload模块

npm install -g livereload

在网站的根目录运行命令行，输入livereload命令，这时候点击chrome上的小图标，就会变为实心状态，代表连接成功。

然后在编辑器中修改代码，保存，流量拿起自动刷新了。

3.编写livereload脚本

上面实现了livereload的基本功能。实际上，我们也可以编写脚本运行。

首先，利用npm安装gulp、gulp-livereload文件，然后编写脚本

var gulp = require("gulp");
var liveReload = require("gulp-livereload");

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);
   });
});

在命令行运行watch任务，更改文本内容，同样能实现实时刷新效果。

gulp watch

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