用户登录

Browser-sync 这个工具可以同步浏览器的变化,是一个很好的开发测试工具 .. 比如我们可以让它监视项目里的一些文件的变化,有变化的时候自动刷新浏览器 .. 下面我们可以定义一个 gulp 自动化任务,里面用一下这个 Browser-sync ..

在项目的下面 .. 先去安装一下 browser-sync ... npm install browser-sync --save-dev .. 把它保存在项目的开发依赖里面 ..

完成以后再安装一下 gulp 工具 .. npm install gulp --save-dev .. 也把它保存在项目的开发依赖里面 ...

gulp 任务

回到项目 .. 添加一个 gulp 任务的文件 .. gulpfile.js .. 里面先导入 gulp ... const gulp = require('gulp') ..

再添加一个 browserSync ... require .. browser-sync ..

下面用一下 gulp 上的 task 去添加一个任务 .. 任务的名字可以自己随便定义 .. 比如我们就叫它 browser-sync ..

一个回调参数 ..

里面用一下 browserSync ... 给它一个配置对象 ..

先把 notify 设置成 false ... 这样每次自动刷新页面的时候,就不会显示 Browser sync 的提示了 .. 再用一个 proxy 设置一个代理 ... 要代理的地址就是我们的项目的服务器地址 .. 这里就是 localhost:3333 ..

然后监视一些文件的变化 .. 添加一个 files .. 一个数组 .. 添加一个 app .. 还有一个 resources ... 这样 app 还有 resources 目录里面的文件发生变化的时候 Browser-sync 就会自动刷新浏览器 ..

最后再添加一个 reloadDelay .. 值可以是 1500 ,表示 1.5 秒 .. 这个 reloadDelay 选项设置的是自动刷新的延时 .. 因为我们修改项目里的文件,项目的服务器也会自动更新,这个时候如果 browser sync 尝试刷新页面的时候就会遇到问题 ... 所以这里设置一点延时,就是等项目的服务器更新完成以后,我们再让它去刷新页面 ...

package.json

打开项目的 package.json ... 在 scripts 这里,添加一个新的命令 .. browser-sync .. 执行一下 ./node_modules/.bin/gulp browser-sync ..

预览

回到命令行 ... 可以执行一下 npm run browser-sync .. 这样就会给我们创建一个 browser-sync 服务器 .. 它会更新浏览器的变化 ..

默认会自动打开这个服务地址 .. 注意这个地址的端口号 .. 默认会是 3000 ..

再打开一个浏览器 .. 访问一下同一个页面 ..

然后在其中的一个浏览器上做点操作 .. 比如随便访问一下页面 .. 这个变化会同步到其它的浏览器上 ..

按一下菜单栏上的菜单按钮 .. 会打开下拉菜单 .. 在其它的浏览器上也会同步这个页面的行为 ...

再试一下 ... 先回到 AntlDemo 这个控制器 .. 在 demo 方法里,给视图传递一个新的数据 .. 名字是 message ... 值先把它设置成 hello ..

然后打开 demo.antl 这个视图 .. 找个地方,绑定输出一下 message 这个数据 .. 把 locale 放在这个段落标签的上面 .. 用一组 span 标签包装一下它 .. 标签上面加上 text-black-50 ..

保存一下视图 .. 视图文件发生变化 .. 浏览器就会自动刷新显示变化 ..

自动化同化浏览器变化(使用 Browser-Sync 创建 gulp 任务)《 Node.js 应用:国际化 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点