gulp + browsersync实现页面自动刷新

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013205165/article/details/90716431

写习惯了vue，特别喜欢vue的自动刷新功能，于是琢磨在node中如何自动刷新，使用过nodemon， 但是感觉效果差点，看到网上有gulp + livereload的方案和gulp +browsersync的方案，但都是褒贬不一，先简单记录如下：

第一、依赖安装

第二、根目录创建gulpfile.js，具体代码如下

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');


//这个可以让express启动
gulp.task("node", function() {
  nodemon({
    script: './bin/server',
    ignore : [
      "public/"
    ],  
    env: {
      'NODE_ENV': 'development'
    }
  })
});

gulp.task('server', ["node"], function() {
    //这的文件只需要监听前端的，一般后端开发不需要刷新页面
    var files = [
      'views/**/*.*'
    ];
 
    //gulp.run(["node"]);
    browserSync.init({
      proxy: 'http://localhost:8001',
      browser: 'chrome',
      notify: false,
      port: 9999 //这个是browserSync对http://localhost:3000实现的代理端口
    });
 
    gulp.watch(files).on("change", reload);
});

参考链接：

https://www.jianshu.com/p/60afca6a00b3

https://www.jianshu.com/p/d31be76f8055

http://www.browsersync.cn/docs/gulp/

http://www.browsersync.cn/docs/api/#api-init