browsersync_如何使用BrowserSync加快开发速度

最新推荐文章于 2024-08-21 09:09:26 发布

culiu9261

最新推荐文章于 2024-08-21 09:09:26 发布

阅读量349

点赞数

文章标签： java linux git vue php ViewUI

原文链接：https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development

版权

browsersync

BrowserSync is an automation tool that makes web development faster. In the past we've automated a lot of actions like compilation of SASS files, image compression etc. BrowserSync brings a whole new type of automation to the table with batteries included.

BrowserSync是一种自动化工具，可以使Web开发更快。过去，我们已经自动化了许多操作，例如SASS文件的编译，图像压缩等。BrowserSync为表带来了一种全新的自动化方式，其中包括电池。

BrowserSync makes your tweaking and testing faster by synchronizing file changes and interactions across many devices.

BrowserSync通过在许多设备之间同步文件更改和交互来使您的调整和测试更快。

BrowserSync的功能 ( Features of BrowserSync )

Live reloading: This is probably the most important feature of BrowserSync. change your code and the page is auto-reloaded. Live reloading works across many browsers and devices.
实时重载：这可能是BrowserSync的最重要功能。更改代码，页面将自动重新加载。实时重载可在许多浏览器和设备上进行。
Interaction synchronization: It means that all your actions are mirrored across every browser. This little feature is useful for testing, especially, when testing across many devices. You can also customize what actions are mirrored across browsers.
交互同步：这意味着您的所有操作都将在每个浏览器上进行镜像。这个小功能对于测试非常有用，尤其是在跨多个设备进行测试时。您也可以自定义跨浏览器镜像的操作。
Simulate slower connections: I believe you are expecting users from all over the world, and some countries are not fortunate enough to have fast internet connection; BrowserSync has a feature that you can use to throttle your website connection speed.
模拟较慢的连接：我相信您期望来自世界各地的用户，并且某些国家/地区还不够幸运，无法实现快速的Internet连接。 BrowserSync具有一项可用于限制网站连接速度的功能。
URL history: BrowserSync logs all browsing history so you can push a test URL to all devices.
URL历史记录： BrowserSync记录所有浏览历史记录，以便您可以将测试URL推送到所有设备。
Extra: BrowserSync is compatible with many task runners like GULP and Grunt. And they work across many operating systems.
附加： BrowserSync与许多任务运行程序兼容，例如GULP和Grunt 。它们可以跨许多操作系统工作。

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

First off, BrowserSync creates a small server, but if you already have a server setup, BrowserSync can hook into that server and act as a proxy. Next, it injects a javascript file on every page; This file makes use of WebSockets to communicate between the server and the client to watch changes to your code or browser action. As soon as BrowserSync detects an action it performs a page reload.

首先， BrowserSync会创建一个小型服务器，但是如果您已经有服务器设置，则BrowserSync可以挂接到该服务器并充当代理。接下来，它将在每个页面上注入一个javascript文件；该文件利用WebSocket在服务器和客户端之间进行通信，以监视对代码或浏览器操作的更改。 BrowserSync一旦检测到操作，就会执行页面重新加载。

安装BrowserSync ( Install BrowserSync )

BrowserSync is an npm package, as such it needs Node.js installed. To install BrowserSync, just open a terminal and:

BrowserSync是一个npm软件包，因此它需要安装Node.js。 要安装BrowserSync ，只需打开一个终端，然后：

npm install-g browser-sync

To check if BrowserSync installed, in your terminal type

要检查是否已安装BrowserSync ，请在您的终端中输入

browser-sync --version

You should get BrowserSync version. At the time of writing this article, the current version installed is 2.11.1.

您应该获得BrowserSync版本。在撰写本文时，当前安装的版本是2.11.1 。

使用BrowserSync ( Using BrowserSync )

First we will use BrowserSync with static files. Assuming you have a directory structure like:

首先，我们将对静态文件使用BrowserSync 。假设您具有以下目录结构：

And from the root of your project directory run the following command

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

This instructs BrowserSync to watch all HTML and CSS files. Once you run the command, a browser window opens in the default browser serving the directories root file, in this case index.html. In the console of the running BrowserSync start command, you should see the following result.

这指示BrowserSync观看所有HTML和CSS文件。运行命令后，将在提供目录根文件的默认浏览器中打开一个浏览器窗口，在本例中为index.html 。在正在运行的BrowserSync start命令的控制台中，您应该看到以下结果。

Local: represents the address on your local machine with which you can view the project.
本地：代表您可以用来查看项目的本地计算机上的地址。
External: represents the address that any user on you local network(LAN or wifi) can view the project.
外部：表示您本地网络（ LAN或wifi）上的任何用户可以查看该项目的地址。
UI: will be talked about below.
UI：将在下面讨论。

BrowserSync和Gulp任务运行器 ( BrowserSync and Gulp task-runner )

Still one of the best task-runners available to the community. To set up a BrowserSync GULP task, we need to have GULP installed. To install GULP, just run the following command:

仍然是社区中最好的任务运行者之一。要设置BrowserSync GULP任务，我们需要安装GULP 。要安装GULP ，只需运行以下命令：

npm install-g gulp

In the root of your project folder, create a file named gulpfile.js. In that file create a gulp task named browser-sync.

在项目文件夹的根目录中，创建一个名为gulpfile.js的文件。在该文件中创建一个名为browser-sync的gulp任务。

var gulp = require('gulp');
var bs = require('browser-sync').create(); // create a browser sync instance.

gulp.task('browser-sync', function() {
    bs.init({
        server: {
            baseDir: "./"
        }
    });
});

To trigger this command, from the terminal run

要触发此命令，请从终端运行

gulp browser-sync

What this does is the same as the BrowserSync command we ran earlier. BrowserSync monitors the directory defined in baseDir and whenever we run the command, the page reloads.

这与我们之前运行的BrowserSync命令相同。 BrowserSync监视baseDir定义的目录，每当我们运行命令时，页面就会重新加载。

You might have already setup a server somewhere on your computer, and you want to keep it that way; Like I mentioned earlier, BrowserSync can act as a proxy to an existing server. To do so just:

您可能已经在计算机上的某处设置了服务器，并且希望保持这种状态。就像我之前提到的， BrowserSync可以充当现有服务器的代理。为此，只需：

...
bs.init({
    server: {
        baseDir: "./"
    },
    proxy: "localhost:8080" // makes a proxy for localhost:8080
});

The proxy option points to the server you want to make a proxy. If your server makes use of WebSockets, you need to tell BrowserSync to enable WebSockets.

proxy选项指向您要创建代理的服务器。如果您的服务器使用WebSockets ，则需要告诉BrowserSync启用WebSockets 。

...
bs.init({
    server: {
        baseDir: "./"
    },
    proxy: {
        target: "localhost:8080", // can be [virtual host, sub-directory, localhost with port]
        ws: true // enables websockets
    }
});
...

NOTE: BrowserSync has more options than just server and proxy. Take a look at some of the other options.
注意： BrowserSync除了服务器和代理之外，还有更多选项。看一下其他一些选项。

使用BrowserSync和SASS ( Using BrowserSync and SASS )

Before we integrate BrowserSync with SASS, lets first create our GULP SASS task. For the task to work we need to install our GULP SASS package.

在将BrowserSync与SASS集成之前，首先创建GULP SASS任务。为了执行此任务，我们需要安装GULP SASS软件包。

npm install--save-dev gulp-sass

Now that we have it installed we can define our task.

现在我们已经安装了它，我们可以定义我们的任务了。

...
var sass = require('gulp-sass');

...
gulp.task('sass', function () {
    return gulp.src('scss/*.scss')
                .pipe(sass())
                .pipe(gulp.dest('css'));
});

Now that we have our SASS task defined we can pipe the result from the sass task into BrowserSync.

现在我们已经定义了SASS任务，我们可以将sass任务的结果通过管道传送到BrowserSync 。

gulp.task('sass', function () {
    return gulp.src('scss/*.scss')
                .pipe(sass())
                .pipe(gulp.dest('css'))
                .pipe(bs.reload({stream: true})); // prompts a reload after compilation
});

Now whenever you run gulp sass from the terminal, all SASS assets will compile and the browser will reload.

现在，无论何时从终端运行gulp sass ，所有SASS资产都将编译，浏览器将重新加载。

自动重新加载BrowserSync ( Auto-reload BrowserSync )

We need to tell BrowserSync to watch all source files for changes. And for that we need to use GULP's watch command to set it up.

我们需要告诉BrowserSync监视所有源文件的更改。为此，我们需要使用GULP的 watch命令进行设置。

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("scss/*.scss", ['sass']);
    gulp.watch("*.html").on('change', bs.reload);
});

With the watch task define, as soon as we call gulp watch, it runs browser-sync task and sets up a watcher on all our sass and html files.

使用watch任务定义后，一旦我们调用gulp watch ，它将运行browser-sync任务，并在所有sass和html文件上设置观察器。

Our final file gulpfile.js should look like this:

我们的最终文件gulpfile.js应该如下所示：

var gulp = require('gulp');
var sass = require('gulp-sass');
var bs = require('browser-sync').create();

gulp.task('browser-sync', ['sass'], function() {
    bs.init({
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('sass', function () {
    return gulp.src('scss/*.scss')
                .pipe(sass())
                .pipe(gulp.dest('css'))
                .pipe(bs.reload({stream: true}));
});

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("scss/*.scss", ['sass']);
    gulp.watch("*.html").on('change', bs.reload);
});

BrowserSync用户界面 ( BrowserSync UI )

At the time of writing this article, the above image showed what the current BrowserSync UI looked like. This then begs the question "What is BrowserSync UI?"

在撰写本文时，上图显示了当前的BrowserSync UI外观 。这就引出了一个问题：“什么是BrowserSync UI？”

BrowserSync UI gives you a bird's eyeview of all BrowserSync options, it shows you all sync options, history, and it lets you configure BrowserSync. To access the UI, just visit the address referenced on your terminal as UI. In my case it is localhost:3001.

BrowserSync UI可以让您一览所有BrowserSync选项，它向您显示所有同步选项，历史记录，并允许您配置BrowserSync 。要访问UI ，只需访问终端上作为UI引用的地址即可。就我而言，它是localhost：3001 。