browsersync_如何使用BrowserSync 2.0改善工作流程

browsersync

Web development involves considerable trial and error. Does this resemble your technique?…

Web开发涉及大量的反复试验。 这类似于您的技术吗？…

1. Open your site in a browser.
   在浏览器中打开您的网站。
2. Write or edit a line or two of code.
   编写或编辑一行或两行代码。
3. Hit the browser’s refresh button. Return to step 2.
   点击浏览器的刷新按钮。 返回步骤2。

Then repeat — in multiple browsers on numerous devices using a multitude of test methods. How many hours did this incur during the past year?

然后重复进行-在多种设备上的多种浏览器中使用多种测试方法。 在过去的一年中，这产生了几个小时？

Fortunately, there are tools which can radically improve your work rate. I’ve been using BrowserSync for a year and it’s revolutionized my workflow. Version 2.0 has just been released and it’s even better. The latest edition offers:

幸运的是，有些工具可以从根本上提高您的工作效率。 我使用BrowserSync已经一年了，它彻底改变了我的工作流程。 版本2.0刚刚发布，甚至更好。 最新版本提供：

Live reloading Modify a file and your page will reload in all browsers. CSS is re-injected so the full page doesn’t need to be refreshed.

实时重新加载修改文件，您的页面将在所有浏览器中重新加载。 CSS被重新注入，因此不需要刷新整个页面。

Interaction synchronization Your scroll, click and form actions are mirrored across every browser. This is especially useful when testing mobile devices; you can modify an input field on your desktop and the same string will appear on all attached phones and tablets. Goodbye on-screen keyboards!

交互同步您的滚动，单击和表单操作会在每个浏览器中镜像。 这在测试移动设备时特别有用。 您可以修改桌面上的输入字段，并且所有连接的手机和平板电脑上都会出现相同的字符串。 再见了屏幕键盘！

Synchronization customization You can choose which actions are mirrored.

同步定制您可以选择要镜像的操作。

Remote inspector You can debug pages remotely using the Chrome Inspector-like weinre (WEb INspector REmote) tool.

远程检查器您可以使用类似于Chrome Inspector的weinre(WEb INspector REmote)工具来远程调试页面。

Simulate slower connections Throttle the response time of all files to discover how the site will be perceived by those on slower connections.

模拟较慢的连接限制所有文件的响应时间，以发现那些较慢连接的用户对网站的感觉。

URL history Your browsing history is recorded so you can push a test URL to all devices instantly.

URL历史记录记录了您的浏览历史记录，因此您可以将测试URL立即推送到所有设备。

New UI As well as the command-line, you can now control BrowserSync from a web-based user interface.

新的UI和命令行，您现在可以从基于Web的用户界面控制BrowserSync。

Build-tool compatibility You can run BrowserSync on its own but I normally deploy it using Gulp. It’s also compatible with Grunt and many other task runners.

Build-tool的兼容性您可以单独运行BrowserSync，但是我通常使用Gulp进行部署。 它还与Grunt和许多其他任务运行器兼容。

Install anywhere for free BrowserSync is open source and works on Windows, Mac OS and Linux. Installation takes minutes and, unlike some alternatives, there’s no need to install browser plug-ins or additional software.

免费随处安装 BrowserSync是开源的，可在Windows，Mac OS和Linux上运行。 安装仅需几分钟，而且与某些替代产品不同，它不需要安装浏览器插件或其他软件。

BrowserSync如何工作？ (How Does BrowserSync Work?)

BrowserSync starts a small web server. If you’re already using a local web server or need to connect to a live website, you can start BrowserSync as a proxy server. It injects small script into every page which communicates with the server via WebSockets. When an event occurs — such as a file modification or scroll action — the server sends an update notification to all connected devices.

BrowserSync启动小型Web服务器。 如果您已经在使用本地Web服务器或需要连接到实时网站，则可以将BrowserSync作为代理服务器启动。 它将小的脚本注入到每个通过WebSockets与服务器通信的页面中。 当发生事件(例如文件修改或滚动操作)时，服务器会将更新通知发送到所有连接的设备。

But you don’t need to worry about any of this; BrowserSync just works and you’ll be the envy of your peers (or accused of witchcraft).

但是您不必担心这些。 BrowserSync正常工作，您会羡慕您的同龄人(或被指控使用巫术) 。

如何安装BrowserSync (How to Install BrowserSync)

If you don’t have it already, install Node.JS from nodejs.org. I understand many PHP, Ruby, Python, .NET etc. developers don’t want to clutter their development machines with yet another runtime, but Node.JS is rapidly becoming invaluable. Besides, it’s JavaScript. At the very least, you can use it for testing code snippets in the REPL.

如果尚未安装，请从nodejs.org安装Node.JS。 我了解许多PHP，Ruby，Python，.NET等。开发人员不想在另一个运行时中混乱他们的开发机器，但是Node.JSSwift变得非常宝贵。 此外，它是JavaScript。 至少，您可以将其用于测试REPL中的代码段。

Ensure you have Node installed by entering node -v on the command line. Then install BrowserSync globally:

通过在命令行上输入node -v来确保已安装Node。 然后全局安装BrowserSync：

npm install browser-sync -g

Depending on your set-up, Mac and Linux users may require sudo at the start of that line.

根据您的设置，Mac和Linux用户可能需要在该行的开头使用sudo 。

Test your installation using:

使用以下方法测试安装：

browser-sync --version

Command-line help is available with:

命令行帮助可用于：

browser-sync --help

如何使用BrowserSync (How to Use BrowserSync)

It’s easiest to illustrate usage with an example. Presume you have a website located in a test folder which has a number of HTML files and CSS files in a css sub-folder. Access this folder from the command line:

用示例最简单地说明用法。 假设您有一个位于test文件夹中的网站，该网站的css子文件夹中包含许多HTML文件和CSS文件。 从命令行访问此文件夹：

cd test

then start BrowserSync:

然后启动BrowserSync：

browser-sync start --server --files "*.html, css/*.css"

This starts the BrowserSync server and instructs it to watch all .html files and any .css files in the css sub-folder. Your console should show something similar to:

这将启动BrowserSync服务器，并指示它监视css子文件夹中的所有.html文件和任何.css文件。 您的控制台应显示类似以下内容：

[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.21:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.21:3001
 -------------------------------------
[BS] Serving files from: ./
[BS] Watching files...

You can enter the “External” address in the location bar of any browser on your network, i.e. http://192.168.1.21:3000. This will load your default page (index.html) and automatically refresh it when the HTML or CSS changes.

您可以在网络上任何浏览器的位置栏中输入“外部”地址，即http://192.168.1.21:3000 。 这将加载您的默认页面(index.html)，并在HTML或CSS更改时自动刷新它。

The control panel can be loaded in your browser with the “UI External” address (http://192.168.1.21:3001). The panels allow you to check settings, change synchronization options, view/push the page history, initiate remote debugging and reload all attached browsers.

可以使用“ UI外部”地址( http://192.168.1.21:3001 )将控制面板加载到浏览器中。 这些面板允许您检查设置，更改同步选项，查看/推送页面历史记录，启动远程调试以及重新加载所有连接的浏览器。

Many other options are available from the command line. Refer the website at browsersync.io for examples or consult the full documentation.

命令行提供了许多其他选项。 有关示例，请访问网站browsersync.io或查阅完整的文档 。

Spend half an hour playing with BrowserSync today and you’ll wonder how you ever worked without it.

今天花半小时使用BrowserSync，您会想知道如果没有它，您将如何工作。

翻译自: https://www.sitepoint.com/improve-workflow-browsersync-2-0/

browsersync