Browser-sync

Using browser-sync will minimise your time & effort while developing a website, and I don’t know about you, but I’m all about saving time and reducing effort!

What is browser-sync? Well, imagine making changes to your webpage code and your browser automatically refreshes without having to click that refresh button on your browser. Well, imagine no more, that’s exactly what browser-sync does.

Go to the official browser-sync website here for more information:

To install it on your MAC then follow these two simple steps:

1. Install node.js:

1. go here and download the latest node.js macOS installer. Install it by double clicking and working through the wizard
2. check that node.js was successfully installed by typing the following two commands in Terminal which will return the currently installed versions of node and npm (which is installed along with node.js):

node --version

and

npm --version

2. Install browser-sync:

1. open Terminal and type in the following command (which will ask for you password to continue):

sudo npm install -g browser-sync

1. check that browser-sync was successfully installed and that it has been automatically added to your PATH variable by typing the following two commands into Terminal:

browsersync --version

and

echo $PATH

How to use browser-sync:

1. open Terminal and change to the directory where the page you are developing is located
2. enter the following command to run browser-sync which will start browser-sync actively monitoring the folder for any file changes you make:

browser-sync start --server --files --directory "**/*"

this will automatically open a browser. You now just click on the name of the file that you are developing (e.g index.html) and it will open in your browser page. Now go ahead and make changes to your code in your favourite code editor and watch your browser update automatically! Cool eh?

And that’s it. All done. Happy developing!