Magento2 在前端开发中使用 Browsersync

作为一个前端开发人员，现在有大量的工具供你使用。在日常使用中，你至少需要一个工具来分配、监视、处理、生成、清理、最小化代码。我会建议你开始使用一个可以在现代前端工作流程的伟大助手，我将向你介绍Browsersync.io。

那么，什么是borwsersync！？

BrowserSync通过同步多个设备上的文件更改和交互，使您的调整和测试更快。

首先从实时重新加载开始，你知道，在浏览器中打开你的站点，然后写几行代码，点击刷新，返回代码，编辑代码，返回浏览器刷新，打开第二浏览器，调整大小，刷新，然后重复……你记住：-）。通过使用Browsersync，你可以避免所有“不必要的”重复任务，节省时间和成本。

因此，browsersync是node.js模块，它作为独立服务器启动并运行，您可以将其与其他本地服务器（例如，apache）用作代理服务器。它通过WebSooCube与服务器通信将小脚本注入到每个页面中。当事件发生时-例如文件修改或滚动操作-服务器向所有连接的设备发送更新通知。

browserync附带的一些主要功能：

• 滚动一个浏览器; 其他浏览器跟随滚动到同一点
• 点击链接; 其他浏览器加载点击的URL
• 填写并提交表格; 其他浏览器提交
• 测试响应式设计; 看到您的网站一次在不同的设备上呈现
• 改变HTML，CSS和JS; 在没有页面刷新的情况下自动注入这些新文件

并且还具有漂亮的用户界面，您可以在其中查看所有可用工具和重要信息。您可以在浏览器中找到UI，输入http://localhost:3001，URL地址将显示在终端/控制台窗口中。

Browsersync可以以各种方式使用，它取决于您的个人偏好以及您当前的前端工作流程。

让我们从安装开始

我们相信您已经安装了node.js，因此我们将跳过节点的安装。有两种选择：全局和本地安装。全局意味着您可以在任何目录中启动browsersync，并为每个项目本地启动，您决定。

Global:

npm install -g browser-sync

Local:

npm install browser-sync --save-dev

如果您运行的是Mac OSX，如果您在安装时遇到错误，请不要使用“sudo”，请检查NPM权限。

在安装之后，让我们从一些基本的东西开始

browser-sync --version

browser-sync start --help

browsersync 的伟大之处在于你可以编写recipes并在不同的项目上重用它或者在一个项目上运行不同的任务。

recipes是如何使用BuffSerSyc与许多其他流行工具一起使用的独立示例。每个示例可以单独运行，并且对于新手和职业人员来说都是一种很好的方式，可以让他们了解可能的不同用例。

查看github以获取recipes的完整列表。

# List all available recipes
$ browser-sync recipe ls
 
# Copy files for gulp.sass recipe
$ browser-sync recipe 'gulp.sass'
 
# Copy files for gulp.sass recipe into custom output directory
$ browser-sync recipe 'gulp.sass' -o 'my-project'

请注意，您需要安装全局browsersync以获取

recipes

命令！

请参阅文档，您可以在其中找到更多示例和指南。

在Magento 2开发中使用

那么，Magneto呢？在Magento 2版本中，他们使用grunt作为任务运行程序引入新的前端工作流程，并将livereload.js作为内部 .less/.css 文件内部更改的“观察者”。

对于 livereload 您需要安装浏览器扩展。在浏览器开发中使用它并不是我的事情所以我选择browserync。这是我个人的选择，你可以寻找适合的环境。

如果您已经在Magneto2中创建了自定义主题，并且至少使用.less文件，那么您就熟悉了前端工作流程。我已经创建了自定义主题“magease”并使用grunt作为任务运行器：

grunt clean:magease
grunt exec:magease
grunt less:magease
grunt watch

要开始使用browsersync，请转到pub静态文件夹，其中生成静态文件并简单的查看修改。

cd magento-dir/pub/static/frontend/Magease/green/en_US/css

用这个命令开始监听

browser-sync start --proxy 'magento.local.address' --files="*.css"

Stanislavs-MacBook-Pro:css stamba$ browser-sync start --proxy 'magento.202' --files="*.css"
[BS] Proxying: http://magento.202
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
 
 -------------------------------------
          UI: http://localhost:3001
 -------------------------------------
[BS] Watching files...

在我自定义.less文件中进行了更改后，grunt选择了这个，调用PHP，在pub/static文件夹中生成新的css，之后browserync“监听”并在浏览器更改内部提供服务。

[BS] Proxying: http://magento.202
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
 
 -------------------------------------
          UI: http://localhost:3001
 
 -------------------------------------
[BS] Watching files...
[BS] File changed: styles-m.css
[BS] File changed: styles-l.css

所以，现在就开始吧，如果你认为这对你当前的工作有帮助。