Bootstrap Gulp tutorial

bootstrap gulp tutorial

Introduction

Gulp is a useful tool that helps you deal with some important tasks when it comes to web development.

That means:

  • Creating a live server (reloading the browser automatically whenever any a file is saved)

  • Compiling SASS to CSS

  • Customizing your Bootstrap / MDBootstrap project (creating your custom Bootstrap / MDBootstrap package only with the components you really need)

  • Minify (compress) your CSS, JavaScript and HTML code

  • Optimize (compress) the images in your project


Preparing the environment

Step 1 - Node.js installation

You need to have Node.js (Node) installed onto your computer before you can install Gulp.

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable network applications.

1. Go to nodejs.org and download node.js

2. Launch installation and install it with all default settings (that means - click "next" until it gets installed :) ).

Step 2 - Git BASH installation

Actually, it's not an obligatory tool. Nevertheless, it's so useful that I strongly recommend to install it.

Git BASH provides a BASH emulation used to run Git from the command line.

1. Go to git-scm.com and depending on your operating system, download the proper version.

2. Launch installation and install it with all default settings (similar to node.js - click "next" until it gets installed).

Step 3 - Installing Gulp globally

1. Open Git Bash terminal

2. Type:

npm install gulp -g

...and click Enter.


The npm install command we've used here is a command that uses Node Package Manager (npm) to install Gulp onto your computer.

The -g flag in this command tells npm to install Gulp globally onto your computer, which allows you to use the gulp command anywhere on your system.

Step 4 - Downloading MDB-gulp package

MDB-gulp is a package dedicated to Gulp usage.

Click on the proper tab below to download your version of MDB (Free or Pro).



If you use MDB Free package, you can download it directly by clicking the red button below.

Download MDB Free gulp Learn more about MDB Pro

If you use MDB Pro - click on the blue button below and you will be redirected to your MDB account. There you can find you MDB-Pro-gulp package.

Download MDB Pro gulp

Note: If you cannot see Gulp package in your account - write us on f.kapusta@mdbootstrap.com

After downloading, unzip the package.

Step 5 - Creating a new Gulp project

1. Right-click on the unzipped MDB Gulp package (that's the package you've downloaded from the previous point) and click Git Bash here

2. Type npm init and click Enter

Then you can fill up the basic data about your project, like name, description or version. You can just leave it blank and click enter until you will be asked "Is it ok? (yes)". Then confirm it by clicking Enter.

3. Type npm install --save-dev gulp and click Enter

The command above will install Gulp locally in this directory as a dev dependency.

Step 6 - Installation of the required plugins

Type the following command to the Git Bash terminal and click Enter.


npm install --save-dev gulp-sass gulp-autoprefixer gulp-cssmin browser-sync gulp-concat gulp-minify gulp-rename gulp-imagemin
    

We'll talk in details about each of these plugins in the steps below. Right now we just need to install them.

Step 7- launching the project and live server test

1. Type gulp mdb-go command to the Git Bash terminal and click Enter

Your project will open in a new browser window. That means the live server is launching and if you make any change in the code, the browser will be updated automatically.

2. Open index.html both in the browser and your code editor ( dist directory).

3. Add any element to the index.html - for example <h1>Test</h1>just below opening <body> tag.

4. Save the file and have a look at the browser. You don't need to refresh it - it's updated automatically

Step 8 - automatic code minification

As you can see in the index.html, we've linked style.min.css file in the head section.

Of course, we don't want to edit the minified file.

What we want to do is to write the code in the style.css and then minify it. Would be nice if it could be done automatically as well.

1. Open /dist/css/style.css file in the code editor

2. Add the following code:


      body {
        background-color: red;
      }
                      

3. Have a look at the browser. Your project has been updated and what's most important - the file style.min.css has been updated as well.

Any changes you will make to the css or sass code will be always minified automatically. Thanks to that your project will be much lighter.

Step 9 - automatic images compression

That's simple but beautiful feature.

Just place any image in the /img directory. After few seconds you will find it compressed (without any loose of quality) in the /dist/img directory.


That's it! In the next lesson you will learn:

  1. How to use and compile SASS in MDB project

  2. How to compile JavaScript modules

  3. How to customize your MDB package and create your own package only with the components you really need


Previous lesson Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits