BROWSERSYNC & GULP

BrowserSync & Gulp are a two very useful combination when it comes to developing applications efficiently, without having to refresh the web page every time you make a change. Let’s look at what BrowserSync & Gulp are, and how to install and use them.

What is Gulp?

Gulp is a tool for automating common tasks or what we call a build system. It’s similar to Grunt as it runs on Node.js and written in JavaScript but Grunt is a configuration driven where as Gulp is stream driven, which comes natural for developers.

With Gulp we can write tasks to minify or lint our JavaScript and CSS, parse templates, and compile your SASS when the files change.

What is BrowserSync

BrowserSync is a plugin that seamlessly integrates with tools like Gulp and Grunt. It can run simultaneously on different browsers and devices, and most importantly it can perform live reloading. This makes it a perfect tool to have in our developer toolkit.

Installing Gulp

Gulp comes as an npm package, so installing Gulp is quite effortless. First, install the Gulp package globally:

npm install gulp –g

Installing BrowserSync

The preferred way of installing BrowserSync is installing it locally for each project rather than global install. This way a dependency can be added to your package.json when you are publishing your project.

npm install browser-sync ––save–dev

This will add an entry to your package.json file under devDependecies section.

Setting Up a Sample Project

Let’s create a sample project in order to test BrowserSync & Gulp. Create a folder for our sample project. And then inside the project folder, create a folder for sass as well as create an index.html file.

mkdir browsersync-gulp
cd browsersync-gulp
mkdir sass
touch index.html

Run npm init to create a package.json file. Follow the prompts to add meta data to your project.

npm init

Using BrowserSync & Gulp

To start working with Gulp, we have to create a file named gulpfile.js. Here we are going to define the tasks to run with the gulp command.

Inside the gulpfile.js, let’s bring in the gulp and the browser-sync modules.

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

As you can see, we are immediately invoking the create() function of the browser-sync module.

Having finished setting up BrowserSync & Gulp, we are going to bring in gulp-sass for compiling SASS into CSS.

npm install gulp-sass ––save–dev

Now it’s the time to add tasks to the gulpfile.js. Let’s start with creating a task for compiling SASS into CSS.

...
gulp.task('sass', function() {
    return gulp.src("sass/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("css"))
        .pipe(browserSync.stream());
});
...

The sass task looks into the sass directory and detects any changes to the files with .scss extension. If there were any changes, it will invoke sass compiler and the result will be saved in the css folder. This output will be piped into the browserSync process, which in turn refreshes the web page by auto-injecting into the browser.

The serve task initializes browserSync and also watches for file changes in the SASS, CSS and HTML files. If a change has been detected, it will reload the web page.

...
gulp.task('serve', ['sass'], function() {
 
    browserSync.init({
        server: "."
    });
 
    gulp.watch("sass/*.scss", ['sass']);
    gulp.watch(["css/*.css", "*.html"]).on('change', browserSync.reload);
});
...

Finally, we will add the default task, which in turn runs the serve task. And that’s all you need to run a basic web app with live reload and SASS.

Let’s look at the final gulpfile.js.

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
 
gulp.task('sass', function() {
    return gulp.src("sass/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("css"))
        .pipe(browserSync.stream());
});
 
gulp.task('serve', ['sass'], function() {
 
    browserSync.init({
        server: "."
    });
 
    gulp.watch("sass/*.scss", ['sass']);
    gulp.watch(["css/*.css", "*.html"]).on('change', browserSync.reload);
});
 
gulp.task('default', ['serve']);

Conclusion

As you can see, BrowserSync & Gulp is a great combination for up and running with your new projects for building web apps.

The Github source for this article can be found in here.