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! 🙂

Install NodeJS & NPM on your machine

Install NodeJS & NPM on your machine

Before I start explaining WHY you really need NodeJS and NPM (Node Package Manager) on your machine NOW, lemme first share just why it’s a must, especially for a frontend developer like yourself.

Pain… explain(ed).

You see, I grew up in a world where CSS preprocessors were a myth. A great unknown. Nothing. Less… Sass… All these cool things didn’t exist. Everything we had at our disposal was plain CSS. Like this:

Yeeeeeyyy, that’s awesome! I could change the color of my text. Not so impressive once 2000s hit the door with a slam and wrecked their way into the web development world. Suddenly, websites required more. Oke, say I have a section (it was all divs back then) with an id of #hero and it had two areas that had to be 9to3 ratio and then different margins and padding and signup form and all that was to be ONLY for the specific #hero area? OK, game on:

Yeah. div#hero .right form #email is exactly what every developer loves to do. Then – SASS came in and everything was amazing… Your code could have looked like this now:

Much better, right? But we had to use pre-processor to use that, right? And how the heck can we do that?

Answer came to me when I found out about Gulp. Oh. My. God. I was instantly 10x faster on coding. Variables, mixins and all the cool stuff I always wanted to have when developing awesome looking web pages have opened another dimension for me in world of frontend development. NPM is the way to go! And lemme tour you down real quick how to install it, and you can check out my article on how to install Gulp in your project and start leveraging the awesomeness of today’s technologies, like Sass or Less.

Enter Node

First of all, if you’re on OS X or Windows,  the most painless method of installing NodeJS and & NPM is through their website.

node and npm home page

I recommend installing the LTS (long term support) version of Node, but if you feel bold to explore, go ahead and get the most recent (current) version. Keep in mind that having the LTS version pretty much guarantees that most of the packages are working.

Once you download the installer and run it, you’ll see that Node is checking out the space requirements… Which can take a few moments to complete.

Node Installer computing space requirements

Click next -> next -> next -> confirm and agree on terms -> next a few times, and installment will proceed. Windows might ask you to confirm and there you go. Node (and NPM alongside) should be ready to use on your computer.

You can go ahead and open up CMD or Terminal to check out if the installment was all good. To open CMD on Windows, press the windows key and start typing cmd, then click enter.

Check Node and NPM

You can type out those two commands to verify that Node and NPM are installed successfully! In the coming tutorials we’ll leverage the power of NPM and we’ll start to rock out hard at the modern frontend development!

Cheers, laddies!