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

               

参考：Gulp.js-livereload 不用F5了，实时自动刷新页面来开发

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

       前面介绍到 gulp 前端自动构建工具，下面我们就来感受一下 gulp 搭配其其他插件 gulp-livereload 所带来的强大力量吧。

在搭建使用gulp-livereload实时自动刷新页面的过程中，需要注意的几点是：

       1、使用 gulp-livereload 需要使用 chrome 浏览器，并且安装 gulp-livereload 插件；

       2、在 gulpfile.js 中创建task， 旧版使用var server = livereload();已经失效，需要使用 livereload.listen(); ；

       3、使用 gulp-livereload 需要使用到服务器，在服务器下进行访问，开启 gulp-livereload 插件；（当然也可以使用 npm 安装 http-server 来启动服务）

gulpfile.js 如下：

/** * Created by DreamBoy on 2016/8/21. */var gulp = require('gulp'),    livereload = require('gulp-livereload');gulp.task('watch', function() { //这里的watch，是自定义的，携程live或者别的也行    livereload.listen();//这里需要注意！旧版使用var server = livereload();已经失效      // app/**/*.* 的意思是 app 文件夹下的 任何文件夹 的 任何文件    gulp.watch('app/**/*.*', function(event) {     livereload.changed(event.path);    });});

成功搭建后，我们可以在 app 文件夹下修改页面，当页面的文件被保存时，浏览器就会进行实时更新，而不需要我们自己去手动刷新。

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow