How to use BrowserSync, Gulp and Sass to fast track your Front-End Development

While working as a Front-End Developer, I’m constantly exploring new tools that could enable me to do my job better, faster and smarter. All of the tools that I end up using on a daily basis have one main characteristic: they save my time by automating repetitive tasks and allow me to focus on what I do best – designing and coding. In this post, I want to share with you three tools that make their way into almost every project I do. They are the true life-savers 😉

Before we begin

First off, the tools that I’m about to show you are available as npm packages. As such, they require Node.js installed. To see if Node.js is installed, open a command line tool and type: node -v. It should print a version number, so you’ll see something like this v6.9.1. If you don’t have Node.js installed, you can get it here.

Now, allow me to give you a fast overview of the tools I love and explain why you should consider using them.

Gulp

As described on their website:

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

You can use any other task-runner of your choice such as: Grunt or NPM Scripts; just make sure you are using one.

In order to check if you have Gulp installed just open a command line and type: gulp -v. Same as Node.js it should print a version number. If you don’t have it installed just run the following command in you command line: npm install -g gulp, it will do the trick.

BrowserSync

BrowserSync is a tool that will remove the never-ending loop of “change file – reload website” from your daily routine. As described on their website:

BrowserSync makes your tweaking and testing faster by synchronizing file changes and interactions across many devices.

Main features include:

  • Live Reloading: Change your code and see the changes automatically reflected across all browsers and devices.
  • Interaction synchronization: This customizable feature allows you to mirror actions across browsers and devices in order to speed up your testing workflow. It allows you to scroll, click or even fill out forms and have this actions automatically mirrored across all browsers and devices.
  • Network Throttle: Test your websites against a slower connection. Even when devices are connected to wifi.

There are many other useful features, but I think you get the idea. The best thing is that all of this is available free and it’s open source!

To check if you have BrowserSync installed just open your command line and run browser-sync --version. BrowserSync can be installed by typing npm install -g browser-sync in your command line.

Sass

Last but not least – Sass.

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Simply put, it allows you to code your CSS. Main features include:

  • Nested syntax
  • Ability to define variables
  • Mathematical functions
  • Operational functions (such as “lighten” and “darken”)
  • Joining of multiple files

Once again, there are alternatives to Sass – for example Less. I will not dig into what’s best because I personally am of an opinion that: As long as you are using a CSS preprocessor – You are making your life easier.

In order to keep things simple, I will use a static html website as an example and start with the following structure:

You can get all the code from this article on my GitHub account here.

So… shall we begin?

Setting up Gulp

We will start by installing npm packages that are required for everything to work. Let’s open a command line and navigate to the root folder of our project. We need to run the following commands:

npm install --save-dev gulp
npm install --save-dev gulp-sass
npm install --save-dev gulp-sourcemaps
npm install --save-dev browser-sync
npm install --save-dev del

This will install Gulp package for our project, Sass support for Gulp, support for Sourcemaps, BrowserSync and provide us with the ability to automatically delete files with our tasks.

Now let’s setup Gulp so we can define our automated tasks. In order to do that we will need to add gulpfile.js to the root of our project. In this file, we will need to define the plugins that our automation will require as well as corresponding tasks. We will also define a default task that will allow us to easily start up our environment. This can be done with the following code:

Due to the fact that tasks in Gulp run concurrently and have no order in which they will finish, you can notice that some of our tasks have dependencies (ex: default task is dependent on clean task to be completed before being executed).

Now that we have our tasks outlined, let’s start defining them. The first one we will do is the clean task that will run and remove any unnecessary auto-generated files that could be left behind. In our case, we will want to remove all generated CSS files in our Styles/css folder. This can be done with the following line: return del(['Styles/css']);.

Note: It is advised against using gulp.start() in favor of executing tasks in dependency array, but in order to ensure that clean task fully completes, it seems to be the best option.

Adding BrowserSync

Now let’s define the BrowserSync task and get it running. This can be done with the following code:

This will start BrowserSyncs and start watching our .scss and .html files for changes. If they occur files will be recompiled and injected back to the browser. Simple, right?

Setting up automatic Sass compiling

All we have left to do is to define Sass compiling task. An added bonus here is that we can generate sourcemaps together with the CSS files in one task and ease our life while debugging 😉 This can be done the following way:

This task will pick each .scss file, compile it to the Styles/css folder and generate corresponding .css.map file placing it in the same folder.

So, what have we achieved?

Right now, if you type gulp in your command line – the magic will happen. Your website will start and any change you make to your source files will be automatically reflected in your browser and across all devices! With just a few lines of code, we’ve removed a lot of tedious and repetitive tasks from your daily workflow, saving time for what matters the most – actually making stuff happen.

What tools do you use to ease your day and improve productivity? Let me know by leaving a comment below!

Note from the Author: Even though I was planning to start blogging this year, the main motivator behind this post was the brilliant team from Enhancv who made a contest of “New Year Resolutions”. You guessed right, this was mine. As I did end up winning a premium subscription, I felt obliged to pull myself together and actually start getting things done here. Thank you, guys, truly! I do recommend everyone to check out the great product they are making, especially if you’re in need of a resume.

Comments

  1. Good read! What tools do you use to ease your day and improve productivity? Yarn instead of npm 😉 I also really like typescript, you should give it a shot

    1. Thanks for the reply. I will indeed checkout Yarn as an alternative for npm. In regard to the TypeScript, I do use it in my projects and it by itself deserves a post (or several) 🙂

Leave a Comment

Your email address will not be published. Required fields are marked *