Select Page
Beginner’s guide to Browsersync using Gulp

Beginner’s guide to Browsersync using Gulp

If you have never heard of Browsersync… Oke. What can I do? You haven’t. Not your fault, tho. Let me quickly sum up what it does.

If you check out their web page, you’ll see this line right on the top:

Time-saving synchronised browser testing

I couldn’t state it better. Browsersync is the awesome web development assistant that’s going to help you live-reload the page every time you save/change something. Imagine this:

You have 1 screen. You have to alt+tab to get to the browser, then click F5, then a few seconds later you see what you did, oke, you don’t like it? alt+tab to get back, rinse, repeat. We probably all know know how this looks like.

BuT WHat if we can make a shortcut?

Instead of doing this process 10x a minute… We can just click ctrl+s and and have the amazing Browsersync do the boring stuff for us! It’s like having an extra hand or something!

Lemme show you how it looks like first:Browsersync in action

Neat-o. If you’re following along since the start of this three part tutorial, you’re all set. If not, here’s a few snippets of what you’ll need:

Directory structure we’re using is:

And gulpfile.js should look like this at this point:

Don’t forget to install gulp and gulp-sass into your project so we can actually leverage this. If you’re battleborn veteran in these series, don’t worry about it.

If you’re not sure what all this means, I recommend checking out tutorial 1 and tutorial 2 of this 3-part series on Gulp and how to make it rock your world and make you a faster and better web developer! 🙂

Now let’s get down to browsersync, shall we?

Before we start leveraging the awesome power of the Browsersync, we gotta pull it into our project. As usual, npm install is the way to go:

Notice the --save-dev flag here. That states that we only need this tool in development. Next, we gotta instruct gulpfile to use it and we’ll right away create a new instance of Browsersync:

Now, our favorite browser refresh tool needs a bit of setup in order for it to work on our local development environment. First of all, the .create() at the end of the require is basically telling browsersync to quickly whip up a server. Browsersync needs one in order to work. At this point, you don’t need to know pretty much anything about the servers in order to configure it. The only thing that it actually requires is the folder root, so to speak, in which the server will start. So, it looks like we need a little configuration in our gulpfile. Here’s the snippet:

We’re calling upon the .init and we’re instructing it to use the server with baseDir in “application” folder. Nice.

The next step would be to just slightly append to the sass task that we have already. We gotta let it know that once the task is run, we also want to ‘reload‘ the page. Here’s how the ‘sass’ task will look like now:

The reload method will inform all browsers about changed files and will either cause the browser to refresh, or inject the files where possible.

At this point, we’re all good! We’re all set… sort of. If we could somehow run both watch and browserSync server tasks at the same time in the same bash window or cmd or terminal, yeah, this would work. However, these tasks start processes that occupy that terminal/bash/cmd, and we can’t use it for other things. Sooooooooo, there’s something we can do, and we should leverage an additional parameter in the gulp watch which will state what task must be run in order for watch to start. Lemme show you:

And maybe you would wanna watch for any html file edits, maybe javascript edits, all that good stuff. Let’s append that there, as well!

Now if you revert to the lil’ gif on top that I showed you, you’d get those results! kA-BooOOoM! #magic. ^_^

Lemme just real quick recap what we’ve managed to accomplished:

  1. We’ve installed Gulp
  2. We made it sing along the most Sass(y) tune ever an use sass (d’oh)
  3. We have a vigilant file watcher to stand guard and update the code once save happened
  4. We’re live reloading pages!
  5. We’re faster in our frontend task duties, hence, better developers!

Play around! Explore! You have a hefty html file to play with! Try adding more styles! Changing stuff! See how it feels for you, once you’re 2-3 minutes into all this, you’ll never try to go back to plain alt+tab, F5, alt+tab routine again.

throwing in a lil’ extras

I am preparing an optional tutorial that you’re gonna love, as well. Usually frontend developer’s task doesn’t simply end up with creating awesome code. Our duties are to concatenate and minify our scripts so they can be as tiny as possible and production-ready! I’ll throw a link to the lesson here once it’s done! 🙂

And congrats! Hopefully this 3-part series in gulp has thought you a little more about how fun development can be, upgraded your knowledge base and made you a better developer! Cheers! 🙂