browser-sync自动刷新，释放你的F5-前端开发博客热门文章
3,088Views
2,288Views
1,794Views
1,674Views
1,670Views
1,337Views前端开发：实时刷新（及时预览）工具小汇总，兼有gulp+browser-sync设置方法
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
自己写标签：puer 实时刷新 免F5 gulp + browser-sync
开门见山，首先讲明一下本文的定位吧：
写这篇文章是因为自己在平时的学习中，一次次试验了很多的前端实时刷新工具，有顺手的，有蹩脚的，有简单的，有麻烦的，安装完又折腾，折腾完又卸载，体验完这些也着实花费了不少时间，就在昨天又刚刚折腾完 gulp
+ browser-sync
的方法，估计可以让我消停一阵子了。这篇文章主要介绍和汇总一下我用过和见过的前端页面实时刷新工具（就是ctrl+s之后实现页面刷新的意思，觉得F5刷新也不麻烦的朋友们就可以不必往下读了哈），希望能为你挑选自己喜欢的工具节省些时间，也少些纠结，闲言少叙，下面开始
工具列表（顺序：从安装方便到功能强大）
1.自带及时预览功能的编辑器：
上述三者都是大名鼎鼎的编辑器，插件众多，功能强大，为前端开发人员们在工作中立下汗马功劳，也深受开发人员们的喜爱，因此也是教程众多，我就不再多说了。google一下，你就知道如何使用它们的及时预览功能了。但是这些工具的及时预览有一点不爽：预览界面内嵌在编辑器界面内，减小了对整张网页的视觉效果，Atom和Brackets都存在这样的问题（当然这也不算是问题了，全看个人喜好）。如Atom编辑器使用atom-preview-html实现的效果：
而webstorm实现预览的效果是很赞的，右上角会有多个浏览器的logo图标，想在哪个浏览器打开就点击哪个就好了，挺方便。webstorm本身也是算是前端人员熟知的编辑器中体量和功能相当强大的了，除了打开速度有点慢之外，没啥说的。
2.sublime text3
把 sublime text3
单独拿出来说是有原因的，首先它是我长期使用的第一款编辑器，有个人情愫在其中难免没有偏爱之心。最喜欢的就是它超快的打开响应速度，有种说干就干的爽快劲儿，即便安装了一大堆的插件儿也丝毫没有觉得变缓慢，点个赞。
说到插件就不得不说sublime编辑器是没有自带及时预览功能的，但是可以通过插件来实现：比如 sidebarEnhancement
，在html文件名上右键打开open in Browser就可以查看效果了，这其实就是最传统的 ctrl+s+F5刷新预览大法，只不过直接在编辑器上打开浏览器了而已。
还可以使用 livereload
方法，但是比较古老了，感兴趣的话可以google一下（如果你可以忍受各种各样的V1推广，V2推广等不相关内容强占你的页面，当然也可以用百度啦）
以前作为新手，对于命令行操作的工具有畏惧感，所以接触到 “F5免刷新工具的时候”(点击进入它的官网可下载)
一下子被其可视化的界面操作吸引了，用它在浏览器中打开文件之后，在编辑器中编辑完代码，ctrl+s即可实现自动刷新，很方便，用了很长一段时间都觉得十分方便，但是最近发现它总是在没有进行任何操作的时候自动刷新一遍，在浏览器中找好的节点位置一下子又不见了，搞得正在盯着屏幕看代码的我很诧异，有种正津津有味看着大片儿一下子电脑黑屏的赶脚，看了下工具作者好多年没更新了，只好依依不舍地先弃掉这一工具另谋它法。
在网上百般寻找，最后找到了这么一款工具： browser-sync
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。
有了它，您不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制。
以上是中文网站上的介绍，很是吸引我，果断决定就用它了！（其实国内也有一款之类似的工具 puer
,二者功能接近，但BrowserSync更强大，我就主要介绍他了
开始安装：
1.下载安装node.js2.安装 BrowserSync
您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。打开一个终端窗口，运行以下命令：
npm install -g browser-sync
这条命令相当于告诉包管理器下载BrowserSync文件，并在全局下安装它们，您可以在所有项目(任何目录)中使用。
当然您也可以结合gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令:
npm install --save-dev browser-sync
3.启动 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 地址， 这一切都会在命令行工具里显示。如果遇到can not GET/这样的提示，说明你在当前文件夹下没有index.html文件，如果想查看的是当前目录下的css文件夹下面的某.html文，要更改访问地址为： http://localhost
:3000/css/html5.html ，这样就能正常访问了。
你也可以查看Browsersync静态示例视频：
不明白上述教程一定要点开看这个链接！！！这里视频演示的是使用方法
// 监听css文件
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"
如果您已经有其他本地服务器环或类似的，您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
在本地创建了一个PHP服务器环境，并通过绑定来访问本地服务器，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问，并监听其css目录下的所有css文件。
browser-sync start --proxy "" "css/* .css"
一点建议，其实也是gulp+browser-sync方法的介绍，算是本文核心（我现在用的方法）
我们建议您结合gulp或grunt来使用，我们这里有详细说明Gulp文档、Grunt文档。如果您还没有使用gulp或grunt，那么可以通过以上方式创建Browsersync鉴于browser-sync中文网站上给出的教程已经很去那面细致了，我就照搬了部分过来，但是实际使用browser-sync之后，估计你会发现，每次启动都要打开git bash或者其他命令窗工具，输入
browsersync start --server --file "/.html，/*.css"
命令行的方法太冗长，所以我就研究了下搭配gulp使用的方法，实际证明官方推荐的方法确实蛮省劲儿的，但是他们没有给出具体详细的设置方法，我在这里写点更为详细的方法好了：
肯定有对 gulp
工具不是很熟悉的人看这篇文，一次都没接触过也不用怕，他就像个大管家，是来统筹管理前端各类比较杂的工具的大总管，你是主人，有什么需要提前给他吩咐好，他会去让各种工具有序干活儿。所以这里可以理解为把启动browser-sync的命令交由gulp去完成，我们的目标是只要在命令框里输入个gulp就能执行browser-sync。
这里推荐一篇学习gulp的文章,注意学习其中对于命令行参数的解释
在上面的教程中的gulpfile.js文件中写好如下内容：
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// Static server
gulp.task('browser-sync', function() {
var files = [
'**/*.html',
'**/*.css',
browserSync.init(files,{
baseDir: "./"
gulp.task('default',['browser-sync']); //定义默认任务
然后重新打开命令行工具，键入“gulp+enter”看看是不是就能打开browser-sync了？这里其实就是把browser-sync设置为了gulp的默认任务了而已，等你需要用到gulp调用其他工具的时候，可以再作修改。
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
成功更容易光顾磨难和艰辛，正如只有经过泥泞的道路才会留下脚印！
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.netbrowser-sync是很好用的前端浏览器自动刷新工具安装node后再npm安装即可使用
browser-sync start --server --files "**/*.css, **/*.html"
阅读(...) 评论()…é>>‘,Helvetica,Arial,sans- line-height:32.9px">
之前有分享过一篇《》，感谢 xyyjk 留言推荐这个工具，自己也花了点时间研究了一下，还是很好上手的。比起之前介绍的方法更加方便（之前的方法已经过时）。BrowserSync可以实时同步更新CSS、JS文件，此外最关键的是全平台支持，即你可以在手机QQ浏览器、微信浏览器里面调试。今天就介绍一下这个工具的用法（以下针对Mac
…é>>‘,Helvetica,Arial,sans-serif">
…é>>‘,Helvetica,Arial,sans- line-height:32.9px">
其实官网已经有很好的&来介绍如何安装。我现在是结合来用的，在Gulp下更方便一点。官方也有BrowserSync for Gulp的插件，并有明确文档说明。
…é>>‘,Helvetica,Arial,sans- font-size:18px">
1、安装开发依赖
…é>>‘,Helvetica,Arial,sans- line-height:32.9px">
在终端里输入：
$ npm install browser-sync gulp --save-dev
…é>>‘,Helvetica,Arial,sans- line-height:32.9px">
如果安装报错请加sudo：
$ sudo npm install browser-sync gulp --save-dev
…é>>‘,Helvetica,Arial,sans- font-size:18px">
2、编辑gulpfile.js
…é>>‘,Helvetica,Arial,sans- line-height:32.9px">
如果项目下没有gulpfile.js文件请新建。先来看一下项目的目录结构，bin文件夹是最终发布的目录，我们把它当作BrowserSync代理服务器启动的根目录：
gulpfile.js文件代码：
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
baseDir: &./bin&
gulp.watch(&./bin/**/*.*&).on('change', browserSync.reload);
…é>>‘,Helvetica,Arial,sans-serif">
…é>>‘,Helvetica,Arial,sans- line-height:32.9px">
打开终端输入：
$ gulp browser-sync
…é>>‘,Helvetica,Arial,sans- line-height:32.9px">
此时浏览器会自动打开http://localhost:3000的页面，我们会发现这个页面正是指向./bin目录下的index.html，这与我们在gulpfile.js中的设置相符。我们在index.html中有一个蓝色边框的box，并输出浏览器的UA：
BrowserSync启动后终端界面会有两个端口提示，分别是:3000的项目页面，和:3001的BrowserSync的UI界面，并且每个端口都有供本地（localhost）和外部（局域网IP）访问的URL：
因为我们把BrowserSync的reload加到了gulp的watch里，所以只要./bin下面的文件发生变化所有访问local URL或External URL的客户端（client）都会自动刷新。
接下来我们把手机和电脑要连接在同一个无线局域网里，我们可以直接通过微信扫码访问External的URL，如本例中的http://192.168.0.141:3000。此时手机显示如下：
…é>>‘,Helvetica,Arial,sans-serif">
…é>>‘,Helvetica,Arial,sans- line-height:32.9px">
我们在PC的浏览器中打开http://localhost:3001，这个端口为3001的URL是BrowserSync的操作界面：
界面操作简洁易懂。我们着重关注的是Remote Debug这一项，默认它的所有选项都是关闭的。我们开启Remote Debugger (weinre)这一项，然后点击出现的红色字：Access remote debugger (opens
in a new tab)，就会打开weinre的控制台界面：
这个界面上会列出当前连接在BrowserSync上的客户端，我们可以选择一个目标（target）来调试，因为我们的微信浏览器访问的是外部链接，即http://192.168.0.141:3000，所以我们点击图中Targets下的第一个link。点击后link会变为绿色，表示当前已经可以对这个客户端进行调试了。此时我们点到顶端的Elements选项卡上，就会看到微信浏览器里网页的HTML结构。鼠标移动到.box的div上的时候，微信浏览器里的相应的元素就会高亮起来：
此时能做的事情就可想而知了。
需要注意的是，要先打开自己的项目页面，再打开Remote Debugger，这样才能列出当前已经连接的客户端。否则的话，即使项目页面和BrowserSync是连接状态，Remote Debugger也会出现捕捉不到的情况。因此，可能需要关闭再重新开启Remote Debugger进行调试。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：18703次
排名：千里之外
原创：19篇
转载：14篇
(1)(2)(4)(6)(8)(4)(2)(1)(4)}