前端开发 ---浏览器自动刷新

1.livereload

 

（1）chrome 安装 livereload插件并启动

 （2） 项目中 

          1.命令行 安装 livereload插件：  npm  i livereload —save-dev

 

           2. 

     var livereload = require('livereload'); //自动刷新页面

　　var server = livereload.createServer({});

    server.watch(dirname + “/");

 

 

 

 

2. browser-sync   （http://www.browsersync.cn/docs/gulp/）

 

 项目中 

          （1）命令行 安装 browser-sync插件：  npm  i browser-sync —save-dev

 

           （2）方法一： 结合 gulp 

     var browserSync = require("browser-sync").create(); //自动刷新页面

//监听html变化

gulp.task('serve', ['html'], function() {

    browserSync.init({

       proxy: "10.1.1.31:9003"

    });

    gulp.watch(paths.html, ['html']);

});

gulp.task('html', function() {

    return gulp.src([paths.html])

        .pipe(gulp.dest(paths.dist + 'saas_web/'))

        .pipe(reload({ stream: true }));

});

 

        （3）. 方法二： 执行命令 

      browser-sync start --proxy ”ip“—files  “监听目录”

 

    eg: browser-sync start --proxy localhost:9003 --files  “dist/"