Using Gulp-livereload to implement browser automatic Refresh page

Reference: Gulp.js-livereload do not need to F5, real-time automatically refresh the page to develop

Reference: Automatic refresh page with Gulp-livereload (v3.0.2)

Before introducing the Gulp front-end automatic build tool, let's feel the power of gulp with its other plug-ins gulp-livereload.

In the process of building a real-time automatic refresh page using Gulp-livereload, several points to note are:

1, use gulp-livereload need to use Chrome browser, and install Gulp-livereload plug-ins;

2, create a task in Gulpfile.js, the old version using the var server = Livereload (), has been invalidated, need to use Livereload.listen (); ；

3, use gulp-livereload need to use to the server, under the server to access, open the Gulp-livereload plug-in; (Of course, you can also use NPM to install Http-server to start the service)

Gulpfile.js is as follows:

/**
 * Created by Dreamboy on 2016/8/21.
 * *
var gulp = require (' Gulp '),
    livereload = require (' gulp-livereload ');

Gulp.task (' Watch ', function () {//The Watch here, is custom, Ctrip live or anything else also
    Livereload.listen (); Legacy uses var server = Livereload (); Has expired  
    //app/**/*.* means any file in any folder under the App folder
    gulp.watch (' App/**/*.* ', function (EV ENT) {
    	livereload.changed (event.path);
    });

After the successful construction, we can modify the page in the app folder, when the page file is saved, the browser will be updated in real time, and do not need to manually refresh ourselves.