有用 Browsersync 的吗?有两个问题想请教一下。

2016-11-06 21:05:57 +08:00
 jmyz0455

我刚开始用 Browsersync 作为前端同步刷新工具,系统是 Windows10 ,目前有两个问题想解决:

第一个是服务器路径问题,每天开始工作我都会 win + x a 打开 powershell ,然后输入:
cd: D:\Work\Website
browser-sync start --server --files "**/*.css, **/*.html, **/*.js"
由于总是重复这两个命令,所以我想能不能一条命令解决呢,在 官方文档 里我找到这么一个例子:
$ browser-sync start --server 'app' --files 'app'
似乎可以在 --server 后写上路径,但是感觉只有 Unix\Linux 才认这种写法,于是我尝试输入:
browser-sync start --server 'D:\Work\Website '
果然不能解决我的问题。不知道 powershell 或者说 Windows 里怎么表达 D:\Work\Website 这个绝对路径,求解。

第二个是我经常会用多台设备测试页面效果,但是 Browsersync 会诡异地把浏览行为也同步了,比如我在平板上把页面往下拉,在手机和电脑里的同一个页面也会跟着动,请问有什么办法独立各个设备(或者说浏览器)的浏览行为?

3310 次点击
所在节点    前端开发
3 条回复
kimoCHG
2016-11-06 22:08:31 +08:00
Solution:
安装 gulp
npm install -g gulp
npm install gulp --save-dev

安装 browser-sync
npm install browser-sync --save-dev

D:\Work\Website 下
新建 gulpfile.js

var gulp = require('gulp'),
browserSync = require('browser-sync');

gulp.task('default', function() {
var files = [
'**/*.html',
'**/*.css',
'**/*.js',
];

browserSync.init(files, {
server: {
baseDir: "./",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['*.*']).on('change', browserSync.reload);
});

Now,每天 cd D:\Work\Website 运行 gulp

现写的可能会有点小问题,试试看呗,可以参考
https://www.browsersync.io/docs/gulp
自己再改改
joname
2016-11-11 17:03:00 +08:00
安装个 git,
然后在工作目录右键 git bash here,
输入 browser-sync start --server --files "**/*.css, **/*.html, **/*.js"
几秒钟的事.
ai7hoo
2017-01-05 22:37:30 +08:00
针对第二个问题回答一下,开启服务后默认会打开浏览器,地址像 http://localhost:3000 这样的,那么你可以打开 http://localhost:3001 就可以配置 browser-sync 了。左侧导航栏有个 sync options ,点击进去可以自己配置各种设备的同步选项。
这些在命令窗口都是有提示的 如下:
Running "browserSync:files" (browserSync) task
[BS] Proxying: http://localhost:81
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.1.84:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.84:3001
-------------------------------------
[BS] Watching files...

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/318540

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX