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.
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.
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.