V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jmyz0455
V2EX  ›  前端开发

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

  •  
  •   jmyz0455 · 2016-11-06 21:05:57 +08:00 · 3280 次点击
    这是一个创建于 2939 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我刚开始用 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 会诡异地把浏览行为也同步了,比如我在平板上把页面往下拉,在手机和电脑里的同一个页面也会跟着动,请问有什么办法独立各个设备(或者说浏览器)的浏览行为?

    3 条回复    2017-01-05 22:37:30 +08:00
    kimoCHG
        1
    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
        2
    joname  
       2016-11-11 17:03:00 +08:00
    安装个 git,
    然后在工作目录右键 git bash here,
    输入 browser-sync start --server --files "**/*.css, **/*.html, **/*.js"
    几秒钟的事.
    ai7hoo
        3
    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...
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2830 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 11:53 · PVG 19:53 · LAX 03:53 · JFK 06:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.