How to use the command 'browser-sync' (with examples)

Browser-sync is a command-line tool that starts a local web server and automatically updates the browser whenever there are changes in the files. It is useful for web developers who want to see real-time changes in their website without manually refreshing the browser.

Use case 1: Start a server from a specific directory

Code:

browser-sync start --server path/to/directory --files path/to/directory

Motivation:

This use case is suitable when you want to launch a local server from a specific directory and watch all files for changes within that directory.

Explanation:

• --server path/to/directory: Starts the local server from the specified directory. Replace path/to/directory with the actual path to the directory you want to serve.
• --files path/to/directory: Watches the specified directory for changes in files. Replace path/to/directory with the actual path to the directory you want to watch.

Example output:

[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.1:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.1:3001
 ------------------------------------

Use case 2: Start a server from the local directory, watching all CSS files in a directory

Code:

browser-sync start --server --files 'path/to/directory/*.css'

Motivation:

This use case is suitable when you want to launch a local server from the current directory and only watch specific types of files, in this case, CSS files only.

Explanation:

• --server: Starts the local server from the current directory.
• --files 'path/to/directory/*.css': Watches the specified directory for changes in CSS files only. Replace path/to/directory with the actual path to the directory you want to watch.

Example output:

[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.1:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.1:3001
 ------------------------------------

Use case 3: Create configuration file

Code:

browser-sync init

Motivation:

This use case is suitable when you want to create a configuration file for your Browsersync setup. The configuration file allows you to define various settings, such as server options, file watching, and browser syncing.

Explanation:

• init: Creates a configuration file named bs-config.js in the current directory.

Example output:

[BS] Created a configuration file: bs-config.js

Use case 4: Start Browsersync from a config file

Code:

browser-sync start --config config_file

Motivation:

This use case is suitable when you have a custom configuration file (config_file) and want to start Browsersync using that configuration.

Explanation:

• --config config_file: Starts Browsersync using the specified configuration file. Replace config_file with the actual path to your configuration file.

Example output:

[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.1:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.1:3001
 ------------------------------------

Conclusion:

Browser-sync is a powerful command-line tool for web developers that allows them to start a local web server and automatically sync the browser with file changes. By using various command-line arguments, you can customize the behavior of browser-sync according to your needs, such as specifying the server directory, file watching patterns, enabling browser sync through a configuration file, and more.