首页 > 其他 > 详细

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

时间:2017-06-28 19:39:41      阅读:307      评论:0      收藏:0      [点我收藏+]

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

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

原文:http://www.cnblogs.com/xslr/p/7091301.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!