Working with Gulp

In this section, we are briefly going to see how to use gulp and the Bulkit gulpfile.js.

Available modules

Bulkit takes advantage of several gulp modules. We are going to see what each one does to give you a better understanding of what is happening. Let's see the modules used by our gulpfile :

"use strict";
const { src, dest, watch, series, parallel } = require("gulp");
const log = require("fancy-log");
const colors = require("ansi-colors");
const browserSync = require("browser-sync").create();
const sass = require("gulp-sass");
const bourbon = require("node-bourbon").includePaths;
const rename = require("gulp-rename");
const concat = require("gulp-concat");
const del = require("del");
const panini = require("panini");
const uglify = require("gulp-uglify-es").default;
const sourcemaps = require("gulp-sourcemaps");
const purgecss = require("gulp-purgecss");
const imagemin = require("gulp-imagemin");
const removeCode = require("gulp-remove-code");
const removeLog = require("gulp-remove-logging");
const prettyHtml = require("gulp-pretty-html");
const sassLint = require("gulp-sass-lint");
const htmllint = require("gulp-htmllint");
const jshint = require("gulp-jshint");
const htmlreplace = require("gulp-html-replace");
const newer = require("gulp-newer");
const autoprefixer = require("gulp-autoprefixer");
const accessibility = require("gulp-accessibility");
const babel = require("gulp-babel");
const logSymbols = require('log-symbols'); //For Symbolic Console logs :) :P

sass.compiler = require("sass");

Gulp Plugins

• gulp-autoprefixer
• gulp-compile-handlebars
• gulp-concat
• gulp-html-replace
• gulp-htmllint
• gulp-imagemin
• gulp-pretty-html
• gulp-remove-code
• gulp-remove-logging
• gulp-rename
• gulp-sass
• node-bourbon
• gulp-sass-lint
• gulp-sourcemaps
• gulp-uglify
• gulp-newer
• gulp-accessibility
• gulp-jshint
• gulp-gulp-gh-pages
• gulp-babel
• panini
• run-sequence
• ansi-colors
• fancy-log

Additional variables

There are two additional variables that we define at the top of the file. We will need them to continue :

• assetspath : a shortcut to get stuff from the /assets folder, so we don't expose our internal paths.
• nodepath : a shortcut to get stuff from the /node-modules folder (created by pnpm), so we don't expose our internal paths.

Gulp tasks

We prepared a certain number of predefined tasks that will help you during all the development process. We will go through the gulpfile.js file to detail each one of this tasks.

Server task

function browserSyncInit(done) {
  browserSync.init({
    server: './dist'
  });
  return done();
}

Gulp uses this task to create a browser-sync instance. It creates a local development server and automatically opens a browser window showing index.html.

Watch task

function watchFiles() {
  watch('src/**/*.html', compileHTML);
  watch(['src/assets/scss/**/*', 'src/assets/scss/*'] , compileSCSS);
  watch('src/assets/js/*.js', compileJS);
  watch('src/assets/img/**/*', copyImages);
}

Gulp uses this task to watch any change you make to the HTML and Sass files. When it detects changes, it triggers other tasks that handle Sass and HTML compilation.

Clean task

function cleanDist(done) {
  del.sync('dist');
  return done();
}

Gulp uses this task to clean the dist folder, which the result of the project build. At the moment you should not see any dist folder because you didn't build the project yet. This task is also used at the beginning of the build process, to clean the folder before compiling the assets again.

Bulma task

function setupBulma() {
  return src([nodepath + 'bulma/*.sass', nodepath + 'bulma/**/*.sass'])
    .pipe(dest('src/assets/sass/'));
}

gulp uses this task to copy the Bulma source file from their location in the _node-modules folder to the sass/ folder. As these assets are already copied in the project, you shouldn't need this task right now.

Plugins task

function concatPlugins() {
  return src([
    nodepath + 'jquery/dist/jquery.min.js',
    nodepath + 'feather-icons/dist/feather.min.js',
    nodepath + 'typed.js/lib/typed.min.js',
    nodepath + 'easy-autocomplete/dist/jquery.easy-autocomplete.min.js',
    nodepath + 'alertifyjs/build/alertify.min.js',
    nodepath + 'scrollreveal/dist/scrollreveal.min.js',
    nodepath + 'ocanvas/build/dist/latest/ocanvas.min.js',
    nodepath + 'slick-carousel/slick/slick.min.js',
    nodepath + 'croppie/croppie.min.js',
    nodepath + '@fengyuanchen/datepicker/dist/datepicker.min.js',
    nodepath + 'chosen-js/chosen.jquery.min.js',
    nodepath + 'izitoast/dist/js/iziToast.min.js',
    nodepath + 'webui-popover/dist/jquery.webui-popover.min.js',
    nodepath + 'zoom-vanilla.js/dist/zoom-vanilla.min.js',
    nodepath + 'scrollreveal/dist/scrollreveal.min.js',
    nodepath + 'card/dist/jquery.card.js',
    'src/assets/vendor/js/*',
  ])
    .pipe(sourcemaps.init())
    .pipe(concat('app.js'))
    .pipe(sourcemaps.write('./'))
    .pipe(dest('dist/assets/js'))
    .pipe(browserSync.stream());
}

Gulp uses this task to concatenate all the required plugins into a single file which gets pushed to dist/assets/js/ folder. You can then access those plugins from there in your web pages.

Assets tasks

function copyImages() {
  return src('src/assets/img/**/*.+(png|jpg|jpeg|gif|svg)')
    .pipe(newer('dist/assets/img/'))
    .pipe(imagemin())
    .pipe(dest('dist/assets/img/'))
    .pipe(browserSync.stream());
}

function copyFont() {
  return src([
      'src/assets/font/*',
    ])
    .pipe(dest('dist/assets/fonts'))
    .pipe(browserSync.stream());
}

function copyData() {
  return src([
    'src/data/**/*',
  ])
    .pipe(dest('dist/assets/data'))
    .pipe(browserSync.stream());
}

function jsVendor() {
  return src([
      'src/assets/vendor/js/*',
    ])
    .pipe(dest('dist/assets/vendor/js'))
    .pipe(browserSync.stream());
}

function cssVendor() {
  return src([
      'src/assets/vendor/css/*',

    ])
    .pipe(dest('dist/assets/vendor/css'))
    .pipe(browserSync.stream());
}

gulp uses those tasks to copy all external assets and dependencies into the corresponding sub-folder of the dist/assets/ folder of the production site.

Compile Sass task

function compileSASS() {
  return src(['src/assets/sass/bulma.sass'])
    .pipe(sass({
      outputStyle: 'compressed',
      sourceComments: 'map',
      sourceMap: 'sass',
      includePaths: bourbon
    }).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(dest('dist/assets/css'))
    .pipe(browserSync.stream());
}

Gulp uses this task to compile the Bulma source files into a single CSS file. it then copies this file in dist/assets/css/.

Compile SCSS task

function compileSCSS() {
  console.log("\n\t" + logSymbols.info, "Compiling SCSS..\n");
  if (environment === "dev") {
    return src(["src/assets/scss/core.scss"])
      .pipe(
        sass({
          outputStyle: "compressed",
          sourceComments: "map",
          sourceMap: "scss",
          includePaths: bourbon,
        }).on("error", sass.logError)
      )
      .pipe(autoprefixer("last 2 versions"))
      .pipe(dest("dist/assets/css"))
      .pipe(browserSync.stream());
  } else {
    return src([
      "src/assets/scss/core.scss",
      "src/assets/scss/teal.scss",
      "src/assets/scss/green.scss",
      "src/assets/scss/blue.scss",
      "src/assets/scss/azur.scss",
      "src/assets/scss/night.scss",
      "src/assets/scss/yellow.scss",
      "src/assets/scss/orange.scss",
      "src/assets/scss/red.scss",
      "src/assets/scss/purple.scss",
    ])
      .pipe(
        sass({
          outputStyle: "compressed",
          sourceComments: "map",
          sourceMap: "scss",
          includePaths: bourbon,
        }).on("error", sass.logError)
      )
      .pipe(autoprefixer("last 2 versions"))
      .pipe(dest("dist/assets/css"))
      .pipe(browserSync.stream());
  }
}

Gulp uses this task to compile the Bulkit SCSS source files into a single CSS file (main.css). it then copies this file in dist/assets/css/.

Compile HTML task

function compileHTML() {
  panini.refresh();
  return src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages/',
      layouts: 'src/layouts/',
      partials: 'src/partials/',
      helpers: 'src/helpers/',
      data: 'src/data/'
    }))
    .pipe(dest('dist'))
    .pipe(browserSync.stream());
}

Gulp uses this task to compile all the changes you make to the template HTML files. It triggers a refresh from Panini to update your templates before rendering.

Compile JS task

function concatJS() {
  console.log("\n\t" + logSymbols.info, "Concatenating Bulkit Javascript..\n");
  return src([
    "src/assets/js/utilities/constants.js",
    "src/assets/js/utilities/utilities.js",
    "src/assets/js/components/pageloader.js",
    "src/assets/js/components/navbar.js",
    "src/assets/js/components/sidebar.js",
    "src/assets/js/utilities/homepage.js",
    "src/assets/js/utilities/demo.js",
    "src/assets/js/components/themeswitcher.js",
    "src/assets/js/components/animations.js",
    "src/assets/js/components/accordion.js",
    "src/assets/js/components/backtotop.js",
    "src/assets/js/components/cards.js",
    "src/assets/js/components/carousel.js",
    "src/assets/js/components/counters.js",
    "src/assets/js/components/countdown.js",
    "src/assets/js/components/dropdowns.js",
    "src/assets/js/components/faq.js",
    "src/assets/js/components/map.js",
    "src/assets/js/components/marquee.js",
    "src/assets/js/components/mockup.js",
    "src/assets/js/components/modal.js",
    "src/assets/js/components/popups.js",
    "src/assets/js/components/pricing.js",
    "src/assets/js/components/quickview.js",
    "src/assets/js/components/search.js",
    "src/assets/js/components/slider.js",
    "src/assets/js/components/tabs.js",
    "src/assets/js/components/tilt.js",
    "src/assets/js/components/toast.js",
    "src/assets/js/components/uploader.js",
    "src/assets/js/components/video.js",
    "src/assets/js/form/autocomplete.js",
    "src/assets/js/form/bulma.js",
    "src/assets/js/form/combo.js",
    "src/assets/js/form/datetime.js",
    "src/assets/js/form/input.js",
    "src/assets/js/form/select.js",
    "src/assets/js/features/auth.js",
    "src/assets/js/features/commerce.js",
    "src/assets/js/extensions/bulma-calendar.min.js",
    "src/assets/js/extensions/bulma-iconpicker.js",
    "src/assets/js/extensions/bulma-steps.min.js",
    "src/assets/js/extensions/bulma-tagsinput.min.js",
    "src/assets/js/main.js",
  ])
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(concat("core.js"))
    .pipe(sourcemaps.write("./"))
    .pipe(dest("dist/assets/js"))
    .pipe(browserSync.stream());
}

Gulp uses this task to copy all your custom javascript to the distribution folder.

Gulp commands

We now have seen a lot of ready to use tasks for gulp. While you can run some of the above tasks individually, let's now see the available commands that make use of multiple tasks at once.

gulp dev

Builds the project and runs a dev server. It runs several tasks that we defined above. Run it by typing this command in your terminal window, at the root of the project :

pnpm gulp dev

Here is what happens when you run pnpm gulp dev :

• Gulp deletes the dist folder
• Then, gulp executes all assets copying and compilation tasks :

exports.dev = series(
  cleanDist,
  copyFont,
  copyData,
  jsVendor,
  cssVendor,
  copyImages,
  compileHTML,
  concatPlugins,
  concatCssPlugins,
  concatJS,
  resetPages,
  prettyHTML,
  compileSCSS,
  browserSyncInit,
  watchFiles
);

Bulkit provides 10 pre-built color schemes. Each theme is represented by a central SCSS file that can be found in srs/assets/scss. Bulkit is configured to only compile the core theme in development. Otherwise, the compilation process would take way too much time as 10 stylesheets would have to be recompiled after each change. To avoid that, we have a setting in gulp that lets you switch between the compilation of a single stylesheet or all 10 stylesheets. To enable compilation for all stylesheets, change the const environment = "dev"; setting to const environment = "";.

Setup Bulkit

You should now have a basic understanding of what Gulp and Panini are doing. You are now ready to setup the project to start developing. We've been talking about gulp and panini for ages but you'll quickly see how fast it is to setup your project. In your terminal window, change directory to the root of the kit of your choice :

cd path/to/Bulkit/

Then start by building the project. Run the following command. It will also launch a development server in your browser window :

pnpm gulp dev

When the task starts, you should be redirected to your browser showing the index.html page. That's it, your project is now running. Every change you make to the HTML or SCSS files will trigger a code compilation and a browser refresh. Really easy isn't it ?

Bulkit Plugins

As stated before, Bulkit's is based on a CSS only framework, Bulma.io. CSS only means there is no javascript shipped with it, unlike Bootstrap. Bulkit has its own javascript implementation of Bulma components using jQuery. You are free to use the existing implementations or to write your own if you want to. You could also use Bulkit in a Vue project by using only the CSS and inspiring from jQuery to write Vue methods. The choice is up to you. Bulkit has 3 main categories of javascript files :

• Core libraries
• Plugins
• Theme javascript

jQuery

Bulkit relies on 1 core library : jQuery. 99% of the available plugins are served using pnpm.

Plugins

Bulkit ships with many interesting javascript plugins that increase the frontend experience. If you want more details about plugin usage and initialization, please head to the JS reference section. Here is a list of the plugins used by Bulkit.

• Innostudio file uploader

A premium jQuery plugin developed by Innostudio. Bulkit grants you a license to use this plugin in one of your projects. It lets you setup a beautiful file uploader for your projects. Read the plugin documentation for more details about usage.

• Chosen JS

A plugin that transforms native HTML select boxes into beautiful and customizable select boxes with additional features. Read the plugin documentation for more details about usage.

• Counterup

A plugin that makes easy to create animated counters. Notice that it relies on Waypoints, another javascript plugin that triggers events based on scroll position. Read the plugin documentation for more details about usage.

• Covervid

Bulkit uses this plugin to display full height background videos. Read the plugin documentation for more details about usage.

• Datedropper

Datedropper is a jQuery timepicker plugin. It stands out by it's awesome design and features. Read the plugin documentation for more details about usage.

• Datepicker

jQuery Datepicker is a jQuery timepicker plugin. It has basic features and is a good choice if you are looking for a simple datepicker for your website. Read the plugin documentation for more details about usage.

• easyAutocomplete

A jQuery plugin that lets you easily setup an autocomplete input. You can also create custom templates for your autocomplete fields. Read the plugin documentation for more details about usage.

• Datepicker

jQuery Datepicker is a jQuery timepicker plugin. It has basic features and is a good choice if you are looking for a simple datepicker for your website. Read the plugin documentation for more details about usage.

• Embed

Embed is a small jQuery plugin that lets you embed a Youtube or a Vimeo video inside your page. Nothing to configure, you just have to add the video url.

• GGtooltip

A small plugin that helps you to display simple tooltips. Documentation can be found here.

• GGpopover

A small plugin that helps you to display nice popovers with many configuration options. Read the plugin documentation for more details about usage.

• gmapjs

A small plugin that lets you display a google map on your web page. Documentation can be found here.

• iziToast

A nice jQuery plugin to display styled toast notifications on your website. It has many configuration options. Read the plugin documentation for more details about usage.

• jqdropdown

A flexible and easy to use dropdown jQuery plugin. Read the plugin documentation for more details about usage.

• scrollreveal

A must have plugin if you want elements to animate on when visible on scroll. Read the plugin documentation for more details about usage.

• scrollspy

Everybody knows Scrollspy from Bootstrap. This plugin has the same behavior. Documentation can be found here.

• slick carousel

A powerful and highly customizable carousel with a very rich documentation. Read more about it here.

• tagsinput

A simple component to transform a text input into a styled tags input. Read more about it here.

• timedropper

An original timepicker that can be customized. Read the plugin documentation for more details about usage.

• Vivus

Vivus is a svg animation library. It makes animating svg paths really easy. Read the plugin documentation for more details about usage.

• Waypoints

Waypoints is a famous jQuery and vanilla JS library that let's you setup events that trigger at certain scroll position. The sticky plugin is also really useful to fix elements on scroll. Read the plugin documentation for more details about usage.

• Wallop slider

Wallop slider is an original and powerful slider. Beside being lightweight, it is highly customizable. Read more about it here.

Theme javascript

Bulkit comes with it's own javascript files.

Global JS

We made some big changes here. As if now, main.js and functions.js are Bulkit's main javascript files. They are used by almost every page that Bulkit features. main.js holds all plugin initialization but also custom component implementation. However, you should review it carefully before using it in production. Delete the parts that you don't need and customize it to fit your needs. functions.js is a big function library where you will find all the functions used by Bulkit.