Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 917 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Gulp and Browserify - Adding Live Reload with Browsersync

3:08 JavaScript lesson by

Building upon the watch task that we begin this lesson with, we’ll look at how to create a local development server using the app directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public .stream() method that is designed exactly for this purpose.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Building upon the watch task that we begin this lesson with, we’ll look at how to create a local development server using the app directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public .stream() method that is designed exactly for this purpose.

Here we have Gulp and Browserify set up so that we can either run the js task to create a bundle once, or we can call the watch task and use Watchify to regenerate the bundle any time a file changes. That's pretty cool, but the next thing we need to do is add a local development server that we can inform to reload every single time the bundle changes. So for that we'll use Browsersync.

NPM install Browsersync, and then we'll bring it into our gulp file, call the create method to get a brand new instance and we'll start Browsersync in the watch task after Watchify is already up and running. So we'll call Browsersync.init, and if we pass the server option, this will create a local development server using one of our directories. So in our case, we have an index.html inside the app directory, so we can simply pass this string and Browsersync will do the rest.

When working with Gulp, it's useful to set the log file changes to false, you'll see why in a moment. That's enough to start the server, but we need to inform Browsersync every time our bundle is updated. To do that we can pipe after we've written the file to disk, into Browsersync.stream. This is a special function within Browsersync which basically is a through stream which doesn't act on any files, it just looks at the file names as they come through, and tries to decide what to do with them.

In our case it would just be a JavaScript file so it will inform all connected devices and browsers to simply perform a reload. OK, we're ready to try this out now, if we run gulp watch, you can see our browser's opened, and if we look in the console, our message here. We'll go into app.js and change this to Shane, hit save, and you can see the bundle is regenerated, the browser is reloaded, exactly what we wanted.

If we go back to our terminal window, we can see that the size of the bundle has been logged, along with how long it took to generate. Remember when I mentioned about log file changes, we set this to false because if it were true, every time our bundle was generated, Browsersync would log that this bundle file had changed, and we'd get a lot of console output here that we really don't need, so that's why we set that to false.


Featured course:

Create an SVG Icon System

Create an SVG Icon System

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?