Custom build introduction

The jQuery.mmenu plugin uses Gulp as a taskrunner. It compiles, minifies and concatenates the .css and .js files. With Gulp, it is really easy to create a customized version of the plugin in just a few steps.

Setup the custom build folder

To create a customized version of the jQuery.mmenu plugin, first download this .zip file and extract it to your filesystem. In this documentation, we'll assume "the custom build folder" was extracted to the same folder as "the plugin folder" you've downloaded from the website, Github or NPM. Your project folder now looks something like this:

project
Your project folder.
— jQuery.mmenu-master
The plugin folder.
— mmenu-custom
The custom build folder.
— — _build.json
A .json file that defines the files that should be concatenated.
— — _variables.scss
A .scss file that defines SCSS variables to override.

Concatenate files

After having set up "the custom build folder", open up "_build.json" and specify a name and the files for the build. Here's an example:

{
   "name"  : "dist/jquery.mmenu.custom",
   "umd"   : true,
   "files" : {
      "core"         : [ "oncanvas", "offcanvas", "scrollbugfix", "screenreader" ],
      "addons"       : [ "navbars", "searchfield" ],
      "extensions"   : [ "themes" ],
      "translations" : []
   }
}

Note that, although "files.translations" is an array, adding multiple translations is not supported.

Override SCSS variables

After having set up "the custom build folder", open up "_variables.scss" and define the SCSS variables you want to override. Here's an example:

$mm_padding   : 15px;
$mm_btnSize   : 50px;
$mm_fontSize  : 15px;

Run Gulp

Before you can actually create a customized version of the jQuery.mmenu plugin, you must first (if you haven't already), install Node.js and install Gulp. Next, open up the command line, navigate to "the plugin folder" and install all devDependencies.

$ cd /path/to/project/jQuery.mmenu-master
$ npm install

If you're not familiar with using the command line, have a look at this great tutorial.

Next, run $ gulp --custom [path], where [path] is a relative path from "the plugin folder" to "the custom build folder".

$ cd /path/to/project/jQuery.mmenu-master
$ gulp --custom ../mmenu-custom

This will compile all .css and .js files into the "dist" folder in "the plugin folder" and grab the files specified in "_build.json" and concatenate them into the specified filename (the "name" string) in "the custom build" folder.

Use the --output flag to specify a different output folder.

$ cd /path/to/project/jQuery.mmenu-master
$ gulp --custom ../mmenu-custom --output ../mmenu-custom/dist

To reset the .css and .js files in the "dist" folder in "the plugin folder" to their original state, run $ gulp.

$ cd /path/to/project/jQuery.mmenu-master
$ gulp