使用gulp和google浏览器实现保存自动刷新

作为前端人，每次保存了内容以后都需要手动去刷新页面确实浪费很多的时间，幸亏有了像gulp一样的东西，感觉好幸福，配置好了以后可以实现文件保存页面自动刷新。

流程：

1.首先安装nodejs，去官方网站上下载就行。

2.全局安装gulp，

npm install gulp -g

3.在需要监听刷新的页面中安装gulp和gulp-livereload

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

4.在当前文件夹建立一个gulpfile.js文件，然后在里面写入

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

gulp.task("watch",function(){

    livereload.listen();

    // app/**/*.*的意思是 app文件夹下的 任何文件夹 的 任何文件
    gulp.watch('app/**/*.*', function (file) {
        livereload.changed(file.path);
    });
});

5.保存以后，在当前文件夹打开cmd，输入命令

gulp watch

如果运行起来提示finished watch的话，证明成功运行，如果在监听文件夹里面修改东西控制台自动更新的话，证明没问题了就。

6.将当前的文件用那种可以直接在服务中打开的方式打开，或者直接用ide打开，有hbuilder，webstorm，brackets等，就是地址不是以file开头的话才行。

7.需要在google浏览器里面安装扩展，打开google浏览器的应用商店，在里面搜索livereload，（需要翻墙）安装成功，在需要监听的页面点击扩展插件，中间的圆点就会从空心变成实心，这时候测试一下，就会发现，每次保存成功，就会自动刷新一下，确实厉害了。