Setting up Gulp 4 for Bootstrap, SASS, and BrowserSync

Published in

The Startup

5 min readAug 7, 2019

The other day I came across a project that I needed to create a quick HTML/CSS prototype to show the looks and certain animations on the prototype.

Little did I know, the set up took more time than I thought.

I want to go through a few steps for setting up gulp, certain things you should look out for and hope this helps you set it up quickly.

Basically you want to be able to do something like this. Make changes on your SCSS file and gulp will automatically watch those changes and display it on the Browser.

You can clone the codes from

https://github.com/amylily1011/gulp4-sass-bootstrap

Before starting.

In this article, I would assumed that you have nodeJS installed. If you haven’t you can visit nodeJS.

What we will need for the Set up:

Download Bootstrap with npm ( this is because you want to be able to modify their default styles).

$ npm install bootstrap

2. Install SaSS. There are different ways to install SaSS and in this article we will use npm to install SaSS.

$ npm install sass -g 
# we will want to install this globally

3. Install Gulp CLI. This will make your life easier when you have the Gulp command line interface.

$ npm install gulp-cli -g

4. Install Gulp, gulp-sass, and browser-sync.

$ npm install gulp gulp-sass browser-sync --save-dev

5. Setting up the package. This command will ask you a bunch of questions, you can just skip all of it for now.

$ npm init

File Structure

Now that the set up is ready, let’s look at the file structure.

You will need to create the css, js, and scss folders. Under the scss folder, create “styles.scss”. Also create the index.html and gulpfile.js files.

|-src
  |-assets
  |-css 
  |-js
  |-scss
    |-styles.scss
  |-index.html
|-gulpfile.js
|-packages.json #this file will be generated with npm init

In ./index.html, let’s add the stylesheet in the<head></head> tag. We don’t need to create this stylesheet yet, because when we set up gulp, it will generate this file for us.

<link rel="stylesheet" href="css/styles.css">

My current environment for this article:

node: v11.13.0
npm: 6.10.1
gulp CLI: 2.2.0
gulp: 4.0.2
sass: 1.19.0

Set up gulpfile.js

This is where the fun part begins!

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

Now let’s test if our scss file is successfully compiled.

./gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();//compile scss into css
function style() {
    return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error',sass.logError))
    .pipe(gulp.dest('src/css'))
    .pipe(browserSync.stream());
}

In the style function, you want to:

Know where is my “scss”. So we will get all files ending with .scss in the src/scss
Pass the file through sass compiler, and tell me if there is an error.
Save the compiled css file (which is in src/css)
Stream changes to all browsers

With Gulp 4.0.x you will need to export it after declaring the function.

exports.style = style;

Your gulpfile.js will look like this.

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();//compile scss into css
function style() {
    return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error',sass.logError))
    .pipe(gulp.dest('src/css'))
    .pipe(browserSync.stream());
}exports.style = style;

Let’s test if this works!

In your terminal run:

$ gulp style

Successful output looks like this.

You should see something like this.

Your terminal will show that style is compiled.

The styles.css file will be generated automatically.

When it’s done, you will check your css folder and a new file called “styles.css” will populate.

If it doesn’t work, you might want to check you src() file and your dest() file.

return gulp.src('./scss/**/*.scss')

In some cases, depending on your file structure, you might need to change to the right location of the output file.

.pipe(gulp.dest('./css'))

Use BrowserSync to Update changes

From here we will create a watch() function, to watch changes made in our .scss file and automatically compile that and show on the browser.

function watch() {
    browserSync.init({
        server: {
           baseDir: "./src",
           index: "/index.html"
        }
    });
    gulp.watch('src/scss/**/*.scss', style)
    gulp.watch('./*.html').on('change',browserSync.reload);
    gulp.watch('./js/**/*.js').on('change', browserSync.reload);
}exports.watch = watch;

Here, you want to tell browser sync which file to start. In many cases, just the “baseDir:” is enough, but to make it more foolproof add the index.html file to the “index:” so it calls to the right place. Also, don’t forget to export the function.

You final gulpfile.js file should look like this.

Now let’s run this on the Terminal:

$ gulp watch

If you run gulp watch successfully, it will show you the information of the port that is running.

A browser with

http://localhost:3000/

will pop up on a new window.

How do I use Bootstrap in the .scss file?

We can test if boostrap is called by simply importing from the nod module.

Our scss/styles.scss file:

@import "node_modules/bootstrap/scss/bootstrap";

In the document, colors need to be declared first to override the other components.

So let’s change our theme primary color to pink to override all components with -primary, such as buttons to have a primary color as pink.

To test that our .scss file is compiling, let’s change our background to red and see what happens.

$theme-colors: (
     "primary": #FF69B4
);@import "node_modules/bootstrap/scss/bootstrap";body {
    color: white;
    background: rgb(92,18,18);
    height: 400vh;
}

Once you saved this file. Make sure you added the button on the html file.

./index.html

Now when we saved all files, gulp will automatically update our changes, compile the sass file, and show it on our browser at http://localhost:3000/.

Voila!