Improve efficiency with Browsersync

Browsersync is an efficient tool for "real-time Refresh"

In general, when we do project development, after the file is saved, you need to refresh the browser to see the modified effect. And, because of the habit, the average developer will brush a few more times. So in the emphasis on efficient development today, are there any tools to improve the inefficiency of this repetitive work?

This is the Browersync we're going to introduce today.

Let's look at a more intuitive:

First install:

Be sure to install the node environment first. After entering the terminal, enter the following for global installation.

NPM install-g Browser-sync

Use:

Enter the project directory in the terminal, and when we do not have a service locally, execute the following code:

Browser-sync start--server--files "Css/*.css"

Here the start and server is actually browser a service, the default port can be seen in the terminal, the following files indicate the change of the listening file, "' Css/*.css" refers to the monitoring of which file changes, You can use the "--files" * * * * * * * * * If you just want to make changes to the project.

If the service is served locally through Php,node,nginx, use the proxy mode for these dynamic sites:

Browser-sync start--proxy "localhost:4000"--files "* *"

Browsersync will provide a new address for access. The results of the operation are as follows:

As you can see, the Local Service address port of the Browsersync is the port that the 3000,3001 port is controlled by one of its UI interfaces.

The use of the current can be a local service with Browsersync to use, combined with Osx-ei-capitan the latest split screen function (if it is a double screen of the person is better), or very comfortable.

Of course, in order to adapt to the automation of the development process, Browser-sync is also supporting grunt and gulp, with [gulp] as an example, in the Gulp configuration file to add a new Gulp task

var gulp = require (' Gulp '); var browsersync = require (' Browser-sync '); // Static Server function "./"}});}); // or ... gulp.task (function"Yourlocal.dev"}) ;

Then perform this gulp task.

Small partner with split screen is more convenient, the right edit code on the left can be instantly refreshed. Otherwise, it may be customary to refresh.

For more details, see [here] (http://www.browsersync.io/docs/)

Improve efficiency with Browsersync