用gulp-livereload实现自动刷新页面（v3.0.2）

第一步：安装

$ sudo npm install gulp -g
$ sudo 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 ./ on: http://0.0.0.0:8080
Hit CTRL-C to stop the server

新开终端窗口中运行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所做的修改可以动态刷新了