-
- Amy_sh 2018-11-27
browsersync vs livereload
browsersync本质是启动一个代理服务器，代理服务器监听文件变化，通过 TCP 长连接，并且仅仅对变化的部分进行视图的同步，而 livereload 本质是帮你做 F5操作；
相似之处在于它们都支持对所有类型的文件进行实时页面更新，也都是单向数据流，只能通过修改文件更新页面，反之不行；二者都支持 gulp 脚本；
browsersync 不需要安装浏览器插件，只依赖于一个 nodejs 的插件，是一个局部的刷新，而 livereload 是对整个页面刷新；
browsersync 可以实现手机浏览器和 PC 浏览器，或者多个浏览器之间的同步，包括视图的同步和交互的同步
安装方法： npm install -g browser-sync
- 1赞 · 2采集
-
- 单单happy 2017-12-30
- http://www.browsersync.cn/docs/gulp/ Browsersync + Gulp.js
- 0赞 · 0采集
-
- 不忘初心2015 2017-05-15
- browser-sync实现局部刷新，实现多个浏览器视图和交互的同步，依赖npm插件
- 0赞 · 0采集
-
- ANXCN 2017-02-02
- 超实用插件介绍，实时可视化编程。
-
截图1赞 · 0采集
-
- ANXCN 2017-02-02
- 插件大全
-
截图0赞 · 0采集
-
- _莫忘初衷_ 2016-12-30
- 静态网站与动态网站的启动方式
-
截图0赞 · 0采集
-
- qq_JW_2 2016-12-18
- gulp
-
截图0赞 · 0采集
-
- 墨遥4328677 2016-12-12
- 和livereload相似之处，1、对所有的文件都可以实时更新。2、也都是单向的，只能通过文件修改页面不能通过页面修改文件，3、都支持chrome脚本 区别：1、browser sync只依赖nodejs插件，不依赖浏览器插件。2、局部刷新。3、可以实现手机浏览器或者pc浏览器，多个浏览器之间的同步。包括视图同步和交互的同步 在安装nodejs之后，只需要在终端输入npm install -g browser-sync 就可以了。（我也不知道能不能安装成功，毕竟我写笔记的时候，还没反应。。。。草，全是问题。失败了） Browsersync能让浏览器实时、快速响应您的文件更改（html、JS、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、Android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。 然而我并没有安装成功，气人哦
- 0赞 · 0采集
-
- 慕客黎 2016-11-14
- browsersync和livereload相似之处：都支持chrome脚本 不同之处，不需要装插件
- 0赞 · 0采集
-
- UFO2015 2016-10-27
- var gulp = require('gulp'), livereload = require('gulp-livereload'), browserSync = require('browser-sync'); gulp.task('html', function() { livereload.listen(); gulp.watch('src/*.html', function(file){ console.log(file); gulp.src(file.path) .pipe(livereload()); }); }); gulp.task('browser-sync', function() { browserSync.init({ server:{ baseDir:"./" } }); }); gulp.task('watch', function() { livereload.listen(); gulp.watch('src/*.html', ['html']); gulp.watch('src/**', ['browser-sync']); }); gulp.task('default',['watch'],['html'],['browser-sync']);
-
截图0赞 · 0采集
-
- UFO2015 2016-10-27
- 动态页面， 使用代理， 监听代理的变化！ browser-sync start --proxy "myproject.dev" --files "**" https://www.browsersync.io/docs/api https://www.browsersync.io/docs/command-line https://www.browsersync.io/docs https://www.browsersync.io/docs/options
-
截图0赞 · 0采集
-
- UFO2015 2016-10-27
- 一定要注意，再项目的根目录下启动， $ browser-sync start --server --files "**" 不然可能会导致，(在兄弟目录下)相对路径下的资源访问path error！ e.g: 再/src下运行，error / libs/ src/ http://localhost:3000/libs/bootstrap/css/bootstrap.min.css Failed to load resource: the server responded with a status of 404 (Not Found)
-
截图0赞 · 0采集
-
- UFO2015 2016-10-27
- 视频， 备课的文件呀！
-
截图0赞 · 0采集
-
- UFO2015 2016-10-27
- cd 项目路径的目录下， 执行 browser-sync start --server --files "css/*.css" 监控所有文件 browser-sync start --server --files "**"
-
截图0赞 · 0采集
-
- UFO2015 2016-10-27
- 局域网中，所有设备的同步更新！
-
截图0赞 · 0采集
-
- UFO2015 2016-10-27
- 支持局部刷新 ？ Ajax ? 瞎扯，明明时页面全部刷新！ https://www.browsersync.io/docs/gulp https://www.browsersync.io/docs/api https://www.browsersync.io/
-
截图0赞 · 0采集
-
- UFO2015 2016-10-27
- npm install -g browser-sync
-
截图0赞 · 0采集
-
- up2013 2016-10-09
- var gulp = require('gulp'); var browserSync = require('browser-sync').create(); // 静态服务器 gulp.task('browser-sync', function() { browserSync.init({ server: { baseDir: "./" } }); }); 为什么老师这样写可以运行，是因为index.html中发生作用的是livereload吗？ @Pertyp同学加了 files: "**",就可以运行了
- 0赞 · 0采集
-
- UFO2015 2016-10-06
- 手机端支持同步，web网页!
-
截图0赞 · 0采集
-
- UFO2015 2016-10-06
- 交互同步
-
截图0赞 · 0采集
-
- 七月有风 2016-10-05
- browser-sync 中如何实现双向修改： 在chrome浏览器中，打开调试面板，在你的sources目录中找到css文件，然后映射到本地文件夹即可。 这样一来browser-sync就无敌了。
- 1赞 · 1采集
-
- 七月有风 2016-10-05
- 老师讲的很好，只是有两个地方试了几次都没试出来，下面是我自己研究后的结果： 1.按照老师的写法，交互同步是没有问题的，但文件好像不同步。按照下面的代码，文件保存后就会同步： gulp.task('browser-sync', function() { browserSync.init({ files: "**", server: { baseDir: "./" } }); }); 2.在手机浏览的问题，我个人做法是用360安全卫士中的 免费wifi建立热点，用手机连接后，直接使用 External：http://192.168.*.***:3000 这行地址(也就是你的ip地址加端口号)登入就OK了。
- 3赞 · 3采集
数据加载中...