芒果爱吃胡萝卜 - browser-sync
type: channel
link: http://blog.mangolovecarrot.net/tag/browser-sync/
items: 解决gulp + browserSync不能自动刷新页面的问题（模块版本确认更新方法）

解决gulp + browserSync不能自动刷新页面的问题（模块版本确认更新方法）
type: item
date: 2020-06-30T01:03:00+08:00
description: 现象在gulp中使用browserSync，可以正常监视到文件被修改，但是browserSync不能进行页面的刷新。（在console能看到reload方法被调用）原因browserSync版本太低。跟最新的浏览器不兼容。版本确认以及更新方法查看指定模块当前使用中的版本npm list browser-sync -- browser-sync@1.9.7去browser-sync官网查看最新版本 官方Release页面 可以查到目前的最新版本是2.26.x 。修改nodejs工程根目录下的package.json文件找到依赖列表中的browser-sync的设置"browser-sync": "~1.9.0",修改为"browser-sync": "~2.26.0",这里解释一下版本号前面符号的意思。有~和^两种符号可以设置。~表示前2位版本号固定，下载最后一位较新的版本。比如配置文件里配置的是~1.8.0，那么进行npm install自动安装依赖包的时候，如果模块库里存在1.8.0 / 1.8.4 / 1.9.1 / 2.0.0这些版本的时候，会选用1.8.4这个版本。而^表示只固定第1位，所以上述同样的情况下就会选用1.9.1这个版本。修改以后执行 npm install更新依赖中途有可能提示缺少依赖dev-ip，先安装一下这个模块再重新执行即可。npm install dev-ip更新完成以后再次确认版本npm list browser-sync -- browser-sync@2.26.7gulpfile.js监视文件及自动刷新gulp.task('watch', function () { browserSync.watch(["index.html", "./assets/dialog.json"], function (event, file) { if (event === "change") { browserSync.reload("index.html"); } }); });至此，就可以正常自动刷新页面了。相关软件版本（2020/06/29）node.js v8.4.0npm v5.3.0gulp v3.9.1browser-sync v2.26.7 (old: v1.9.7)Google Chrome v83.0