How long have you felt that developing a front-end as per the mock-up, drinks all your time? The 1px or 2px change makes you refresh the page a 100 times, clear your cache and history and what not?! The pain increases if you have to check your website’s behavior in all the browsers (ohh yeah! you have clients who still live under the rock and have a computer which run IE 6/7).
Features of Browser-sync
But, before getting into details of how to install or run the program, needn’t you know its super cool features?
- Browser-sync will watch all file changes. Once the changes in your files are saved, the program either injects the css, or if the change is in HTML or JS, it re-loads the web page.
- As per the name, it syncs more than needed. All the webpages will be synced, in whichever browser you have opened.
- The program is lightweight and free.
- Above all of these, its super fast and never lets you down!
How to install Browser-sync in your computer?
If you are a developer, you should already have node.js installed on your computer. If not,
- Go to this website and install the node.js package
- Now, open the command prompt and type the below command and wait till the installation completes
npm install -g browser-sync
How to run browser-sync?
Running the program is as easy as installing!
Type the below command
browser-sync start --files "css/*.css, *.html"
The command starts the browser-sync program and starts watching all files under css folder and all HTML files.
You can find more commands and troubleshooting details, go to the official BrowserSync website.
Note: Make sure that body tag is present in your HTML document. Because browser-sync uses this tag to inject an asynchronous script tag
<script async>...</script> to make all the wonder happen!