gulp + browsersync实现页面自动刷新

本文主要是介绍gulp + browsersync实现页面自动刷新，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

写习惯了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

这篇关于gulp + browsersync实现页面自动刷新的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---