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

那么,什么是borwsersync!?

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

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

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

browserync附带的一些主要功能:

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

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

浏览器同步UI

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

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