本篇主要是以 http://www.imooc.com/article/14759 为参考来写的:

已经整理到github上:https://github.com/Macaulish/gulp-BrowserSync-nodemon

1,使用 Browsersync 来进行浏览器同步测试

参考: http://www.browsersync.cn/#install
1)安装NodeJs,
2)安装BrowserSync (npm install -g browser-sync)
3)安装好之后,在控制台中键入:
  browser-sync start --server --files "css/*.css"(切记是双引号)
这样,当'css/*.css'文件有任何修改,就能看看到浏览器同步变化了。
^^^^^^^^^^以上初级教程,具体看文档http://www.browsersync.cn/docs/api/

2,结合 gulp 使用 Browsersync

参考:http://www.imooc.com/article/14759
1)全局安装gulp (npm install -g gulp);
2)全局安装BrowserSync (npm install -g browser-sync);
3)在项目目录下新建gulpfile.js,然后在gulpfile.js中定义一个任务,启动Browsersync:
const gulp = require('gulp');
// 调用.create() 意味着你得到一个唯一的实例并允许您创建多个服务器或者代理。
const browserSync = require('browser-sync').create();
// 定义一个服务,任务的名字,该任务所要执行的一些操作
gulp.task('watch',function(){
// 启动Browsersync服务。这将启动一个服务器,代理服务器(proxy)or静态服务器(server)
browserSync.init({
//设置监听的文件,以gulpfile.js所在的根目录未起点,如果不在根目录要加上路径,单个文件就用字符串,多个文件就用数组
files:['*.html','css/*.css','js/*.js'],
// 启动静态服务器,默认监听3000端口,设置启动时打开的index.html的路径
server:{
baseDir:'./'
},
// 在不同浏览器上镜像点击,滚动和表单,即所有浏览器会同步
ghostMode:{
clicks:true,
scroll:true
},
// 更改控制台前缀
logPrefix:'learning browser-sync in gulp',
// browser:['chrome','firefox','iexplore'],
// 设置监听时打开的浏览器,下面的设置会同时打开chrome
browser:['chrome','iexplore'],
// 设置服务监听的端口号
port:8080
})
})
4)在命令行中键入 gulp watch,执行任务就OK了。

具体可看:(Browser Reloading)  https://www.browsersync.io/docs/gulp/#gulp-reload

其中如果不知道.pipe()是什么请看:(readable.pipe(desination[,options]))https://nodejs.org/api/stream.html#stream_readable_pipe_destination_options

3,Browsersync结合nodemon实现node.js项目全栈刷新

之前一直在自己做一个基于express框架的项目,用到了supervisor这个调试工具,每次服务器端js代码有修改,都会自动重启node.js,但是浏览器并不会自动刷新,我又想到了Browsersync。

要把Browsersync引进来 需要一个跟supervisor类似的工具:nodemon.

相比于supervisor,nodemon的优点包括:更轻量级,内存占用更小。使用更加方便,更容易扩展等。

在gulp中可以用gulp-nodemon来实现nodemon的功能,那么我们实现全栈刷新的工作就可以分为两步。

1,用gulp-nodemon启动node.js项目服务器。
2,在node.js项目启动后启动Browsersync,并监听相关文件的变化

>>>>>>>>我按照作者这个方法写过之后发现 实现不了,我再找找资料

使用browserSync自动刷新的更多相关文章

  1. gulp browser-sync自动刷新插件

    很久没弄gulp了,都快忘了,今天又来温习下browser-sync 自动刷新插件,在安装的时候出现以下提示: $ npm install browser-sync --save-dev> ws ...

  2. gulp+browserSync自动刷新页面

    BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...

  3. express+gulp+gulp-nodemon+browser-sync自动刷新

    express自动生成项目.不在赘述 1.在项目根目录下新建终端,依次运行如下命令 npm install gulp --save-dev npm install gulp-nodemon --sav ...

  4. gulp自动刷新插件

    gulp自动刷新的插件很多,但是感觉最好用的还是 browser-sync 插件.如果不想用命令行,也可以使用 browser-sync界面工具 先安装 browser-sync 插件: npm in ...

  5. BrowserSync,调试利器--自动刷新(转

    ---恢复内容开始--- 请想象这样一个场面:你开着两个显示器,一边是IDE里的代码,另一边是浏览器里的你正在开发的应用.此时桌上还放着你的手机,手机里也是这个开发中的应用.然后,你新写了一小段代码, ...

  6. gulp+browserSync+nodemon 实现express 全端自动刷新的实践

    学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究 ...

  7. 前端浏览器自动刷新神器:Browsersync

    [安装] 1 npm install -g browser-sync [静态项目使用browsersync] 自己可以去browsersync官网查看,其实使用很简单,总结下就是: 1 browser ...

  8. Browsersync结合gulp和nodemon实现express全栈自动刷新

    Browsersync能让浏览器实时.快速响应你的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试. ...

  9. 前端写代码自动刷新神器Browsersync

    Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面. 更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试 ...

随机推荐

  1. Mina 系列(二)之基础

    Mina 系列(二)之基础 Mina 使用起来多么简洁方便呀,就是不具备 Java NIO 的基础,只要了解 Mina 常用的 API,就可以灵活使用并完成应用开发. 1. Mina 概述 首先,看 ...

  2. using directive 使用指令,与using declaration使用声明。

    使用指令是把名字空间中的所有名字引入到当前作用域,而使用声明是把名字空间的某个名字引入到当前作用域中 语法如下 //test.cpp #include<iostream> //using ...

  3. DevExpress VCL 已死-----关于13.1.4的发布。

    随着DevExpress VCL 13.1.4 的发布,已基本上宣布了devexpress vcl 已经死亡了. 除了一些bug 修正,没有什么新的东西,每年的订阅费又那么贵,而且delphi 现在已 ...

  4. 2018.07.20 bzoj3211: 花神游历各国(线段树)

    传送门 维护区间开方,区间求和.这个是线段树常规操作. 显然一个数被开方若干次之后要么是1,要么是0,所以用线段树维护区间最大和区间和,如果区间最大不超过1就剪枝剪掉,不然就继续递归直到叶节点时停下进 ...

  5. 2018.07.12 atcoder Go Home(贪心)

    传送门 题意简述:大家在数轴上生活,公司在 s. 班车送所有人回家,有 n 个住处,第 i 个位置在 xi,居住了 pi 的人. 保证 xi 互不相同. 大家⼀起投票向前还是向后,如果票数相同就固定向 ...

  6. arduino uno r3 + SIM900 + USB打火机 实现电话触发点火

    需求来源 1.儿子过完年6岁,喜欢玩烟花,但是胆子小,于是我就负责点火,从年前26到大年初八,每天晚上要给儿子点鞭炮啊点鞭炮. 2.这边过年要打关门炮跟开门炮,大年初一凌晨还要起来帮老妈点鞭炮,说实在 ...

  7. IntelliJ IDEA 2017版 spring-boot使用JdbcTemplate实例

    搭建总框架: (1)在pom.xml加入jdbcTemplate的依赖: (2)编写Dao类,声明为:@Repository,引入JdbcTemplate (3)编写Service类,引入Dao进行使 ...

  8. javascript实现责任链设计模式

    javascript实现责任链设计模式 使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将这些对象连成一条链,并沿这条链传递该请求,直到有一个对象处理他为止. 这是Gof的定义 ...

  9. ASYNC PROGRAMING IN JAVASCRIPT[转]

    本文从异步风格讲起,分析Javascript中异步变成的技巧.问题和解决方案.具体的,从回调造成的问题说起,并谈到了利用事件.Promise.Generator等技术来解决这些问题. 异步之殇 NON ...

  10. C语言printf的格式

    例1 int a = 12345;printf("%6d",a); // 输出6位不够左边补空格printf("%.6d",a); // 输出6位不够左边补0例 ...