Building Tools
Back to top

Grunt Tasks

  1. Home
  2. Building Tools

Installing Node.js

First, you must download and install node.js. NPM stands for node packaged modules and is a way to manage development dependencies through Node.js.

Download the Node.js source code or a pre-built installer for your platform, and start developing, you can download it from nodejs.org

You can check it in your terminal window using these commands node --version and npm --version.

Installing Grunt

GruntJS is a JavaScipt task runner. In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc...

Modern Build System use the grunt task to generate the different templates.

From the command line:

  • Install grunt-cli globally with npm install -g grunt-cli
  • To install node packages, navigate to the root modern-admin/directory, then run npm install. NPM use the package.json file and automatically install the required local dependencies listed in it.

Grunt Commands

Gruntfile.js file contain all the predefined task. Below template contain all the grunt task and usage.

You can modify or add your task in Gruntfile.js file.

Command Description
grunt dist-clean Clean js and css folders from app-assets.
grunt dist-js Grunt task to clean js folder from app-assets, copy js files from src folder and minify them.
grunt sass-compile Compile core, main(app), pages and plugins scss files.
grunt dist-css Clean css folder, compile all scss files, auto prefix them, organize them and finally minify them in app-assets/css folder.
grunt dist-css-rtl Clean css folder, compile all scss files, auto prefix them, organize them and finally minify them in app-assets/css-rtl folder.
grunt dist-html Compile all pages PUG files and create relative HTML pages in html/{TextDirection}/{LayoutName} folder. In this command you need to pass the Layout, LayoutName & TextDirection. Read grunt template commands for more info.
grunt dist Grunt task to generate css and js files in app-assets folder.
grunt monitor Watch all scss and pug files change and compile it accordingly. In this command you need to pass the Layout, LayoutName & TextDirection. Read grunt template commands for more info.
grunt server Start browser sync.

Grunt Commands to Generate Template

Modern build system provides built in 7 different types of templates 2 horizontal and 5 vertical templates as shown in above folder structure.

To generate/watch specific template/file first you need to uncomment the template include from modern-admin/src/template-builder/pages/template.pug file. You can also create your own template(i.e custom-template) and include here to generate it.

In below template.pug file, vertical-menu-template is uncommented to generate Vertical Menu template.

            
            //- Pre defined template include condition  [PUG extends is not workign in include :( ]

            //-Vertical menu templates
            include ../templates/vertical-menu-template

            //-Vertical overlay menu templates
            //-include ../templates/vertical-overlay-menu-template

            //-Horizontal menu templates
            //-include ../templates/horizontal-menu-template

            //-You can create your own template(i.e custom-template) and include here to generate it.

            //-Your custom template templates
            //-include ../templates/custom-template

In second step run the grunt template command. Below is the generic command to generate/watch any template.

grunt {{task}} --Layout="{{template-name}}" --LayoutName="{{generated-template-name}}" --TextDirection="{{text-direction}}"

Task Template Name Generated Template Name Text Direction
monitor, dist-html, dist-sk-html vertical-menu-template, vertical-modern-menu-template, vertical-menu-template-semi-dark, vertical-menu-template-nav, vertical-menu-template-light, vertical-overlay-menu-template, horizontal-menu-template Provide the any custom name i.e my-vertical-menu-template, it will generate all html file inside html/{{TextDirection}}/my-vertical-menu-template LTR, RTL

Blow table contain all template task and text direction wise grunt commands.

Task Grunt Command
Vertical Menu Template
Monitor LTR: grunt monitor --Layout="vertical-menu-template" --LayoutName="my-vertical-menu-template" --TextDirection="LTR"
RTL: grunt monitor --Layout="vertical-menu-template" --LayoutName="my-vertical-menu-template" --TextDirection="RTL"
HTML Generation LTR: grunt dist-html --Layout="vertical-menu-template" --LayoutName="my-vertical-menu-template" --TextDirection="LTR"
RTL: grunt dist-html --Layout="vertical-menu-template" --LayoutName="my-vertical-menu-template" --TextDirection="RTL"
Starter Kit Generation LTR: grunt dist-sk-html --Layout="vertical-menu-template" --LayoutName="my-vertical-menu-template" --TextDirection="LTR"
RTL: grunt dist-sk-html --Layout="vertical-menu-template" --LayoutName="my-vertical-menu-template" --TextDirection="RTL"
Vertical Modern Menu Template
Monitor LTR: grunt monitor --Layout="vertical-modern-menu-template" --LayoutName="my-vertical-modern-menu-template" --TextDirection="LTR"
RTL: grunt monitor --Layout="vertical-modern-menu-template" --LayoutName="my-vertical-modern-menu-template" --TextDirection="RTL"
HTML Generation LTR: grunt dist-html --Layout="vertical-modern-menu-template" --LayoutName="my-vertical-modern-menu-template" --TextDirection="LTR"
RTL: grunt dist-html --Layout="vertical-modern-menu-template" --LayoutName="my-vertical-modern-menu-template" --TextDirection="RTL"
Starter Kit Generation LTR: grunt dist-sk-html --Layout="vertical-modern-menu-template" --LayoutName="my-vertical-modern-menu-template" --TextDirection="LTR"
RTL: grunt dist-sk-html --Layout="vertical-modern-menu-template" --LayoutName="my-vertical-modern-menu-template" --TextDirection="RTL"
Semi Dark Vertical Menu Template
Monitor LTR: grunt monitor --Layout="vertical-menu-template-semi-dark" --LayoutName="my-vertical-menu-template-semi-dark" --TextDirection="LTR"
RTL: grunt monitor --Layout="vertical-menu-template-semi-dark" --LayoutName="my-vertical-menu-template-semi-dark" --TextDirection="RTL"
HTML Generation LTR: grunt dist-html --Layout="vertical-menu-template-semi-dark" --LayoutName="my-vertical-menu-template-semi-dark" --TextDirection="LTR"
RTL: grunt dist-html --Layout="vertical-menu-template-semi-dark" --LayoutName="my-vertical-menu-template-semi-dark" --TextDirection="RTL"
Starter Kit Generation LTR: grunt dist-sk-html --Layout="vertical-menu-template-semi-dark" --LayoutName="my-vertical-menu-template-semi-dark" --TextDirection="LTR"
RTL: grunt dist-sk-html --Layout="vertical-menu-template-semi-dark" --LayoutName="my-vertical-menu-template-semi-dark" --TextDirection="RTL"
Dark Nav Vertical Menu Template
Monitor LTR: grunt monitor --Layout="vertical-menu-template-nav" --LayoutName="my-vertical-menu-template-nav" --TextDirection="LTR"
RTL: grunt monitor --Layout="vertical-menu-template-nav" --LayoutName="my-vertical-menu-template-nav" --TextDirection="RTL"
HTML Generation LTR: grunt dist-html --Layout="vertical-menu-template-nav" --LayoutName="my-vertical-menu-template-nav" --TextDirection="LTR"
RTL: grunt dist-html --Layout="vertical-menu-template-nav" --LayoutName="my-vertical-menu-template-nav" --TextDirection="RTL"
Starter Kit Generation LTR: grunt dist-sk-html --Layout="vertical-menu-template-nav" --LayoutName="my-vertical-menu-template-nav" --TextDirection="LTR"
RTL: grunt dist-sk-html --Layout="vertical-menu-template-nav" --LayoutName="my-vertical-menu-template-nav" --TextDirection="RTL"
Light Vertical Menu Template
Monitor LTR: grunt monitor --Layout="vertical-menu-template-light" --LayoutName="my-vertical-menu-template-light" --TextDirection="LTR"
RTL: grunt monitor --Layout="vertical-menu-template-light" --LayoutName="my-vertical-menu-template-light" --TextDirection="RTL"
HTML Generation LTR: grunt dist-html --Layout="vertical-menu-template-light" --LayoutName="my-vertical-menu-template-light" --TextDirection="LTR"
RTL: grunt dist-html --Layout="vertical-menu-template-light" --LayoutName="my-vertical-menu-template-light" --TextDirection="RTL"
Starter Kit Generation LTR: grunt dist-sk-html --Layout="vertical-menu-template-light" --LayoutName="my-vertical-menu-template-light" --TextDirection="LTR"
RTL: grunt dist-sk-html --Layout="vertical-menu-template-light" --LayoutName="my-vertical-menu-template-light" --TextDirection="RTL"
Vertical Overlay Menu Template
Monitor LTR: grunt monitor --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="LTR"
RTL: grunt monitor --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="RTL"
HTML Generation LTR: grunt dist-html --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="LTR"
RTL: grunt dist-html --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="RTL"
Starter Kit Generation LTR: grunt dist-sk-html --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="LTR"
RTL: grunt dist-html --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="RTL"
Horizontal Menu Template
Monitor LTR: grunt monitor --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="LTR"
RTL: grunt monitor --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="RTL"
HTML Generation LTR: grunt dist-html --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="LTR"
RTL: grunt dist-html --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="RTL"
Starter Kit Generation LTR: grunt dist-sk-html --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="LTR"
RTL: grunt dist-html --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="RTL"
Full Width Horizontal Menu Template
Monitor LTR: grunt monitor --Layout="horizontal-menu-template-nav" --LayoutName="my-horizontal-menu-template-nav" --TextDirection="LTR"
RTL: grunt monitor --Layout="horizontal-menu-template-nav" --LayoutName="my-horizontal-menu-template-nav" --TextDirection="RTL"
HTML Generation LTR: grunt dist-html --Layout="horizontal-menu-template-nav" --LayoutName="my-horizontal-menu-template-nav" --TextDirection="LTR"
RTL: grunt dist-html --Layout="horizontal-menu-template-nav" --LayoutName="my-horizontal-menu-template-nav" --TextDirection="RTL"
Starter Kit Generation LTR: grunt dist-sk-html --Layout="horizontal-menu-template-nav" --LayoutName="my-horizontal-menu-template-nav" --TextDirection="LTR"
RTL: grunt dist-html --Layout="horizontal-menu-template-nav" --LayoutName="my-horizontal-menu-template-nav" --TextDirection="RTL"