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.
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...
Robust 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
robust-admin/directory, then runnpm install. NPM use thepackage.jsonfile and automatically install the required local dependencies listed in it.
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. |
Robust build system provides built in 7 different types of templates 2 horizontal and 5 vertical templates as shown in above folder structure.
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-compact-menu-template, vertical-overlay-menu-template, vertical-content-menu-template, horizontal-top-icon-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-layout-menu-template |
LTR, RTL |
Blow table contain 'vertical-menu-template' template task and text direction wise gulp commands. Based on thta example you can create the rest the template and your custom template commands to generate the tempate.
| 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 Contant Menu Template | |
| Monitor | LTR: grunt monitor --Layout="vertical-content-menu-template" --LayoutName="my-vertical-content-menu-template" --TextDirection="LTR"RTL: grunt monitor --Layout="vertical-content-menu-template" --LayoutName="my-vertical-content-menu-template" --TextDirection="RTL" |
| HTML Generation | LTR: grunt dist-html --Layout="vertical-content-menu-template" --LayoutName="my-vertical-content-menu-template" --TextDirection="LTR"RTL: grunt dist-html --Layout="vertical-content-menu-template" --LayoutName="my-vertical-content-menu-template" --TextDirection="RTL" |
| Starter Kit Generation | LTR: grunt dist-sk-html --Layout="vertical-content-menu-template" --LayoutName="my-vertical-content-menu-template" --TextDirection="LTR"RTL: grunt dist-sk-html --Layout="vertical-content-menu-template" --LayoutName="my-vertical-content-menu-template" --TextDirection="RTL" |
| Vertical Multi-level Menu Template | |
| Monitor | LTR: grunt monitor --Layout="vertical-multi-level-menu-template" --LayoutName="my-vertical-multi-level-menu-template" --TextDirection="LTR"RTL: grunt monitor --Layout="vertical-multi-level-menu-template" --LayoutName="my-vertical-multi-level-menu-template" --TextDirection="RTL" |
| HTML Generation | LTR: grunt dist-html --Layout="vertical-multi-level-menu-template" --LayoutName="my-vertical-multi-level-menu-template" --TextDirection="LTR"RTL: grunt dist-html --Layout="vertical-multi-level-menu-template" --LayoutName="my-vertical-multi-level-menu-template" --TextDirection="RTL" |
| Starter Kit Generation | LTR: grunt dist-sk-html --Layout="vertical-multi-level-menu-template" --LayoutName="my-vertical-multi-level-menu-template" --TextDirection="LTR"RTL: grunt dist-sk-html --Layout="vertical-multi-level-menu-template" --LayoutName="my-vertical-multi-level-menu-template" --TextDirection="RTL" |
| Vertical Compact Menu Template | |
| Monitor | LTR: grunt monitor --Layout="vertical-compact-menu-template" --LayoutName="my-vertical-compact-menu-template" --TextDirection="LTR"RTL: grunt monitor --Layout="vertical-compact-menu-template" --LayoutName="my-vertical-compact-menu-template" --TextDirection="RTL" |
| HTML Generation | LTR: grunt dist-html --Layout="vertical-compact-menu-template" --LayoutName="my-vertical-compact-menu-template" --TextDirection="LTR"RTL: grunt dist-html --Layout="vertical-compact-menu-template" --LayoutName="my-vertical-compact-menu-template" --TextDirection="RTL" |
| Starter Kit Generation | LTR: grunt dist-sk-html --Layout="vertical-compact-menu-template" --LayoutName="my-vertical-compact-menu-template" --TextDirection="LTR"RTL: grunt dist-sk-html --Layout="vertical-compact-menu-template" --LayoutName="my-vertical-compact-menu-template" --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-sk-html --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="RTL" |
| Horizontal Top-icon Menu Template | |
| Monitor | LTR: grunt monitor --Layout="horizontal-top-icon-menu-template" --LayoutName="my-horizontal-top-icon-menu-template" --TextDirection="LTR"RTL: grunt monitor --Layout="horizontal-top-icon-menu-template" --LayoutName="my-horizontal-top-icon-menu-template" --TextDirection="RTL" |
| HTML Generation | LTR: grunt dist-html --Layout="horizontal-top-icon-menu-template" --LayoutName="my-horizontal-top-icon-menu-template" --TextDirection="LTR"RTL: grunt dist-html --Layout="horizontal-top-icon-menu-template" --LayoutName="my-horizontal-top-icon-menu-template" --TextDirection="RTL" |
| Starter Kit Generation | LTR: grunt dist-sk-html --Layout="horizontal-top-icon-menu-template" --LayoutName="my-horizontal-top-icon-menu-template" --TextDirection="LTR"RTL: grunt dist-sk-html --Layout="horizontal-top-icon-menu-template" --LayoutName="my-horizontal-top-icon-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-sk-html --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="RTL" |