多端浏览器同步调试工具:browserSync与webpack的结合

天气越来越冷,我刚买的毛线手套在今中午骑ofo单车时候都快有点顶不住了,问我为什么中午出去骑单车,因为我和我哥哥约了一顿宽板凳火锅。很久没吃火锅了,果断骑车20分钟去约饭,回来时候心满意足,边骑车边想,不如做一套针对ofo共享单车的共享车锁密码应用,每次使用完单车后顺手上传车牌号和密码,反正每辆车都是固定密码的,以后大家用车就可以先通过车牌查询有无对应的密码共享出来,这才是真正的共享经济嘛。哈哈,不过这种事也就是想想罢了,就像当初12306网站的登录注册都存在着sql注入漏洞,但是也没有人敢去搞一搞,有些事还是想想就够了。酒足饭饱,回到工位,还是趁热乎把昨天说的尽快落实一下吧...

1. 先说说使用背景

说起前端开发,不得不说现在如火如荼的移动端H5,从朋友圈广泛传播的各种酷炫活动页到现在各大App应用中内嵌的移动端H5网页,都属于移动端网页的开发。但是作为一名前端开发者,实际在开发移动端页面的时候,真机调试是一个很头疼的问题,因为移动端页面不像PC端页面那样能直接用电脑浏览器双击打开 *.html 文件来浏览调试,最最笨的方法就是将正在开发中的文件通过数据线从电脑拷贝到手机,然后手机打开html文件预览。当然这种非人类的办法效率实在是极其低下也很难以启齿...所以我们要想一个办法,能做到十分省时省力的就能在手机上预览甚至调试到我们正在开发的移动端页面。
记得去年毕业进入我的上家公司,当时的我一问三不知,我的导师组长引领了我一年的成长之路,这一年多我学会了很多,很感激这一年来公司给我提供的成长环境,和那一堆给予我帮助的同事。言归正传,刚来公司首先要做的就是熟悉公司的开发模式,经过组长给我的讲解,我明白了我们的大概开发流程,我们的工程框架用的是fis || grunt,我们在本地开发并编译好代码文件,同时会运行一个脚本,在每次保存本地代码时,脚本会把编译好的代码文件push到我们每个人配置好的开发机服务器上,同时对应一个个人测试域的url,在内网里访问这个url就可以访问我们正在开发的页面,这样就实现了边开发,手机通过一个url就可以实时边访问页面了。但是这种很大工程化流程在我们自己私下想搭环境时候就不好搞了,最起码我搞不来。
因为当时我们的是用git进行代码管理的,所以我又想可以通过git来同步我的代码,生成一个url来访问,就是每次还得git push上传代码,也是有点繁琐。
后来现在的同事给我推荐了browserSync,一头雾水的我查了一下,不查不知道,一查惊呆了,世间还有这等神器!官网首页的几句话就把我深深吸引住了,如获至宝,于是研究了一下,起初不依赖什么框架就是在外面单纯的跑脚本,没问题,很强大,后来又把它集成到了gulp里,但是后来我决定放弃刚用了一次的gulp,转投webpack,幸运的是,webpack也很强大地支持browserSync,喜大普奔。
好了,废话了这么多,其实在webpack中使用browserSync也很简单,就是在上篇文章《webpack从安装到起飞》中提到的webpack.config.js中配置一下就好了,那么我们先从头说一下browserSync是个什么东东。

2. 初识browserSync

正如标题所说,它是一个省时的浏览器同步测试工具,借用一下官方的介绍:

Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是** Browsersync可以同时在PC、平板、手机等设备下进项调试**。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。


Browsersync

有了它,您不用在多个浏览器、多个设备间来回切换,频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中,这一切还可以通过可视化界面来控制。


Browsersync

看到这里,我们就知道了,是它,是它,就是它,它就是我一直在寻找的最优解决方案——Browsersync。

3. Browsersync的基本使用

对于Browsersync的用法,我不在用自己的话描述了,官方的文档说的很详细很好,这里就直接引用了:

  1. 安装 Node.js
    BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js 安装适用于Mac OS,Windows和Linux
  1. 安装 BrowserSync
    您可以选择从Node.js的包管理(NPM)库中 安装BrowserSync。打开一个终端窗口,运行以下命令:
    npm install -g browser-sync
    您告诉包管理器下载BrowserSync文件,并在全局下安装它们,您可以在所有项目(任何目录)中使用。
    当然您也可以结合gulpjs或gruntjs构建工具来使用,在您需要构建的项目里运行下面的命令:
    npm install --save-dev browser-sync
  2. 启动 BrowserSync
    一个基本用途是,如果您只希望在对某个css
    文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:
    静态网站
    如果您想要监听.css
    文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。
    // --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --files "css/\.css"
    如果您需要监听多个类型的文件,您只需要用逗号隔开。例如我们再加入一个.html
    文件
    // --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --files "css/\
    .css, \.html"// 如果你的文件层级比较深,您可以考虑使用 \\(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 browser-sync start --server --files "\\/\.css, \\/\.html"
    我们做了一个静态例子的示范,您可以下载示例包,文件您可以解压任何盘符的任何目录下,不能是中文路径。打开您的命令行工具,进入到BrowsersyncExample目录下,运行以下其中一条命令。Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址,这一切都会在命令行工具里显示。你也可以查看Browsersync静态示例视频
    // 监听css文件 browser-sync start --server --files "css/\
    .css"// 监听css和html文件 browser-sync start --server --files "css/\.css, \.html"
    动态网站
    如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
    // 主机名可以是ip或域名browser-sync start --proxy "主机名" "css/\.css"
    在本地创建了一个PHP服务器环境,并通过绑定Browsersync.cn来访问本地服务器,使用以下命令方式,Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn,并监听其css目录下的所有css文件。
    browser-sync start --proxy "Browsersync.cn" "css/\
    .css"
    一点建议
    我们建议您结合gulp或grunt来使用,我们这里有详细说明Gulp文档Grunt文档。如果您还没有使用gulp或grunt,那么可以通过以上方式创建Browsersync

到此为止,我们基本可以脱离或者依赖gulp||grunt来使用browsersync了,比如在gulp中,我们在gulpfiles.js中配置好了browsersync,执行gulp watch,就会直接调起browsersync服务,我们在命令行可以看到PC和移动端对应的url访问地址,值得注意的是,browsersync会默认寻找根目录下的index.html文件,有则执行,无则报错,如果我们想访问目录下的其他文件,只需要在url后面加上相应的路径地址即可。
比如:http://localhost:3000/app/index.html
那么我们如何在webpack中使用browserSync呢,官方文档只给了gulp和grunt的集成方式,接下来看看browsersync在webpack中怎么配置。

4. webpack中的browsersync

还是找到我们上一个文件项目,打开webpack.config.js备用。

依然打开命令行终端,进入项目根目录,执行
npm install browser-sync-webpack-plugin --save-dev 来安装browsersync插件
安装完毕,package.json中也显示了安装完毕后的依赖项:
"extract-text-webpack-plugin": "^1.0.1",

接下来就是配置webpack.config.js了,
首先引入插件:var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
然后再 plugins 配置项中配置:

new BrowserSyncPlugin({
        host: 'localhost',
        port: 3000,
        files: '',
        server: {
            //指定服务器启动根目录
            baseDir: './'
        }
})

基本这么一配置,就ok了,似不似很简单,似不似很开熏...
然后我们直接 webpack -w 就发现浏览器自动打开了,默认访问了http://localhost:3000/
我们根据要访问的文件路径,补充好url后续,就可以开心的开发了,你会发现每次一保存代码,浏览器就自动刷新,不管是PC端还是移动端,而且在一端滚动页面,另一端也会同步滚动,感觉屌爆了。
好了,这么神奇的东西就这样为我们所用了。开心。

5. 最后

这次编辑文章用的 markDown语法,简直比昨天用的富文本不能再好了,程序员写文档神器,虽然之前我组长就让我写,但是我懒啊,没写,现在还是用到了,所以说要学习的地方还是很多啊小伙子。
今天过得好快,下一个项目也要来了,坐等...
886我要准备下班了,今晚还要去健身房差点忘了…
对了,接下来会记录一下webpack+vue的组件模块化开发。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容

  • 原文标题:Gulp for Beginners作者: Zell Liew翻译:治电小白菜原文地址:https://...
    ZZES_ZCDC阅读 1,574评论 6 18
  • 参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...
    JenniferYe阅读 2,528评论 1 17
  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 910评论 0 1
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,433评论 1 32
  • 相关链接:Browsersync官网Browsersync中文网 前言:1分钟快速使用 Browsersync 下...
    AlessiaLi阅读 3,104评论 0 5