首页 > 代码库 > 前端开发 ---浏览器自动刷新

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

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; min-height: 13.0px } span.s1 { } span.Apple-tab-span { white-space: pre }</style>

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/"

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