Bootstrap Gulp tutorial

Bootstrap Gulp free tutorial

Gulp is a useful tool that helps you deal with some important tasks in web development.

Introduction

It is useful for:

  • Creating a live server (that reloads the browser automatically whenever a file is saved);
  • Compiling Sass to CSS;
  • Customizing your Bootstrap / MDBootstrap project (creating a custom Bootstrap / MDBootstrap package with only the components you really need);
  • Minificating (compressing) your CSS, JavaScript and HTML code
  • Optimizing (compressing) the images in your project

Preparing the environment

Step 1 - Node.js installation

You need to have Node.js (Node) installed on 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. To install it, please:

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

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

Step 2 - Git BASH installation

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

Git BASH provides a BASH emulation that can be 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 the installation program and install Git BASH with all default settings (similar to above - click "next" until it gets installed).

Step 3 - Installing Gulp globally

1. Open the Git BASH terminal

2. Type:

npm install gulp@4.0.2 -g

...and click Enter

The npm install command we've used here is a command that uses the 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 the MDB-gulp package

MDB-gulp is a package dedicated to Gulp usage with MDB.

Click on the applicable 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, which for bundles is inside the main package.

Download MDB Pro gulp

Note: If you cannot see the Gulp package in your account/package - write us on contact@mdbootstrap.com

After downloading, please 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 step) and click Git Bash here

2. Type npm init and click Enter

Then you can fill in the basic data about your project, like name, description and version. You can just leave it blank and click enter until you are asked "Is it ok? (yes)". Then confirm the question 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 into 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
Step 7- launching the project and live server test

1. Type gulp mdb-go command into the Git BASH terminal and click Enter

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

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

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

4. Save the file and have a look at the browser. You won'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 the 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 file and then minify it. Would be nice if it could be done automatically as well. This can be achieved as follows:

1. Open the /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 always be minified automatically. Thanks to that your project will take up less storage space.

Step 8 - automatic images compression

This is a simple but beautiful feature.

Just place any image in the /img directory. Then, after a few seconds you will find it compressed (without any loss of quality) in the /dist/img directory.