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实现页面自动刷新的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。