How To Use Gulp - Browser Sync Live Reload Tutorial - Learn Gulp

In this video I show you How To Use BrowserSync to Live Reload your Web Browser whenever you make changes to your code.

Front End and Back end Development is easier with the right tools.

Here's some informantion from the documentation page.There's no official Browsersync plugin for Gulp, because it's not needed! You simply require the module, utilise the API and configure it with options. The following are some common use-cases as seen in popular projects such as Google's web starter kit and many others.

Visit PixemWeb:
https://www.pixemweb.com/

First, you'll need to install Browsersync & Gulp as development dependencies.

npm install browser-sync gulp --save-dev

Then, use them within your gulpfile.js:

Streams are supported in Browsersync, so you can call reload at specific points during your tasks and all browsers will be informed of the changes. Because Browsersync only cares about your CSS when it's finished compiling - make sure you call .stream() after gulp.dest

Sometimes you might just want to reload the page completely (for example, after processing a bunch of JS files), but you want the reload to happen after your tasks. This will be easier in gulp 4.x.x, but for now you can do the following (make sure you return the stream from your tasks to ensure that browserSync.reload() is called at the correct time).

Learn to use Gulp and you will become a more productive coder. Improve your Workflow when coding your website. Node and NPM are what power Gulp and have made the process of web development a smoother process for those interested in dedicating time to learning.