用gulp-livereload实现自动刷新页面

第一步：安装

 npm install gulp -g  
 npm install http-server -g  

安裝 Chrome Extension: LiveReload

第二步：配置Gulp：

进入项目目录后在终端输入：

npm init //用于创建package.json与gruntfile.js  

sudo npm install gulp gulp-livereload --save-dev  

在gruntfile.js中编辑如下脚本：

var gulp = require('gulp')  
            ,livereload = require('gulp-livereload');  
gulp.task('watch', function () {  
    livereload.listen();//这里需要注意！旧版使用var server = livereload();已经失效  
    gulp.watch(['*.html'], function(event){  
        livereload.changed(event.path);  
    });  
});  

第三步：执行：

先开启服务

http-server
//开启后提示如下
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.0.107:8080
Hit CTRL-C to stop the server 

如果mac 装了livereload的话到这步就可以打开网页了 ok

新开终端窗口中运行Gulp’s task

gulp watch  
[12:34:47] Using gulpfile ~/Workspaces/Gulp-Study/gulpfile.js  
[12:34:47] Starting 'watch'...  
[12:34:47] Finished 'watch' after 7.63 ms  

在chrome中打开http://localhost:8080/
点击之前安装的chrome extension:LiveReload，会变成，连接成功。

此时在本地html所做的修改可以动态刷新了