MDB 5 Gulp Integration

Introduction

This guide will walk you through steps necessary to include MDB package in your project using Gulp.

Note: We do not support this solution and we recommend using Webpack instead. Check out our Webpack integration.

Setup

Before you start make sure you have Node.js installed.

Create a project folder and setup npm

We’ll create the my-project folder and initialize npm with the -y argument to avoid it asking us all the interactive questions.

        
            
      mkdir my-project && cd my-project
      npm init -y
Install MDB and Gulp.

Next we need to install Gulp and MDB. We use --save-dev to signal that these dependencies are only for development use and not for production. 

        
            
      npm install --save-dev mdb-ui-kit gulp
Install additional dependencies

In addition to Gulp and MDB we need we need a few more dependencies to properly bundle SCSS and JS with Gulp. These include Sass, Autoprefixer, Browsersync, and some Gulp plugins 

        
            
        npm i --save-dev browser-sync gulp-uglify gulp-sass sass gulp-postcss gulp-concat autoprefixer cssnano

Project Structure

We’ve already created the my-project folder and initialized npm. Now we’ll also create our src folder to round out the project structure. Run the following from my-project, or manually create the folder and file structure shown below. 

        
            
        mkdir src src/js src/scss
        touch gulpfile.js src/index.html src/js/main.js src/scss/styles.scss

When you’re done, your complete project should look like this:

        
          my-project/
          ├── src/
          │   ├── js/
          │   │   └── main.js
          │   └── scss/
          │   │    └── styles.scss
          |   └── index.html
          ├── gulpfile.js
          ├── package-lock.json
          └── package.json

At this point, everything is in the right place, but Gulp won’t work because we haven’t filled in our gulpfile.js yet.

Configure Gulp

With dependencies installed and our project folder ready for us to start coding, we can now configure Gulp and run our project locally.

Open gulpfile.js in your editor

Since it’s blank, we’ll need to add some boilerplate config to it so we can start our server. This part of the config tells Gulp were to look for our project’s JavaScript and SASS, where to output the compiled code to (dist), and how the development server should behave (pulling from the dist folder with hot reload). 

        
            
        const { src, dest, watch, series } = require('gulp');
        const browserSync = require('browser-sync').create();
        const concat = require('gulp-concat');
        const uglify = require('gulp-uglify');
        const sass = require('gulp-sass')(require('sass'));
        const postcss = require('gulp-postcss');
        const autoprefixer = require('autoprefixer');
        const cssnano = require('cssnano');
        
        const paths = {
          html: {
            src: ['./src/**/*.html'],
            dest: './dist/',
          },
          styles: {
            src: ['./node_modules/mdb-ui-kit/css/mdb.min.css', './src/scss/**/*.scss'],
            dest: './dist/css/',
          },
          scripts: {
            src: ['./node_modules/mdb-ui-kit/js/mdb.umd.min.js', './src/js/**/*.js'],
            dest: './dist/js/',
          },
          server: {
            baseDir: './dist',
            watch: ['./dist/**/*.*'],
          }
        };
        
        function compileStyles() {
          return src(paths.styles.src)
            .pipe(concat("styles.min.css"))
            .pipe(sass().on('error', sass.logError))
            .pipe(postcss([autoprefixer(), cssnano()]))
            .pipe(dest(paths.styles.dest))
        }
        
        function minifyScripts() {
          return src(paths.scripts.src)
            .pipe(concat("index.min.js"))
            .pipe(uglify())
            .pipe(dest(paths.scripts.dest))
        }
        
        function copyHtml() {
          return src(paths.html.src)
            .pipe(dest(paths.html.dest))
        }
        
        function liveSever(cb) {
          browserSync.init(paths.server.watch, {
            server: {
              baseDir: paths.server.baseDir
            },
          });
        
          cb();
        }
        
        function watcher() {
          watch(paths.html.src, copyHtml);
          watch(paths.styles.src, compileStyles);
          watch(paths.scripts.src, minifyScripts);
        }
        
        exports.dev = series(copyHtml, compileStyles, minifyScripts, liveSever, watcher);
        exports.build = series(copyHtml, compileStyles, minifyScripts);
Next we fill in our src/index.html
        
            
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <title>MDB w/ Gulp</title>
          <!-- Font Awesome -->
          <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
          />
          <!-- Google Fonts Roboto -->
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
          />
          <link
            rel="stylesheet"
            href="css/styles.min.css"
          />
        </head>
        <body>
          <div class="container py-4 px-3 mx-auto">
            <h1>Hello, MDB and Gulp!</h1>
            <button class="btn btn-primary" data-mdb-ripple-init>Primary button</button>
          </div>
      
          <script src="js/index.min.js"></script>
        </body>
      </html>

We’re including a little bit of styling here with the div class="container" and <button> so that we see when CSS from MDB package is loaded by Gulp.

Now we need an npm script to run Gulp

Open package.json and add the start script shown below (you should already have the test script). We’ll use this script to start our local Gulp dev server. 

        
            
      "scripts": {
        "start": "gulp dev",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
And finally, we can start Gulp

From the my-project folder in your terminal, run that newly added npm script: 

        
            
        npm start
Now you're done

With MDB's source Sass and JS fully loaded, your local development server should work and you should see MDB styles applied to button in the example.