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
.
GulpJS 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 gulp task to generate the different templates.
From the command line:
- Install gulp globally with
npm install gulp-cli -g
- To install node packages, navigate to the root
modern-admin/
directory, make sure to rename default package.json file to package.grunt.json and rename package.gulp.json file to package.json file. Then runnpm install
. NPM use thepackage.json
file and automatically install the required local dependencies listed in it.
gulpfile.js
file contain all the predefined task. Below template contain all the gulp task and usage.
You can modify or add your task in gulpfile.js
file.
Command | Description |
---|---|
gulp dist-clean |
Clean js and css folders from app-assets. |
gulp dist-js |
Gulp task to clean js folder from app-assets, copy js files from src folder and minify them. |
gulp sass-compile |
Compile core, main(app), pages and plugins scss files. |
gulp dist-css |
Clean css folder, compile all scss files, auto prefix them, organize them and finally minify them in app-assets/css folder. |
gulp 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. |
gulp 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 gulp template commands for more info. |
gulp dist |
Gulp task to generate css and js files in app-assets folder. |
gulp monitor |
Watch all scss and pug files change and compile it accordingly. In this command you need to pass the Layout, LayoutName & TextDirection. Read gulp template commands for more info. |
To generate/watch specific template/file you need to run the gulp template command.
Below is the generic command to generate/watch any template.
gulp {{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 |
Modern build system provides built in 7 different types of templates 2 horizontal and 5 vertical templates as shown in above folder structure.
Blow table contain all template task and text direction wise gulp commands.
Task | Gulp Command |
---|---|
Vertical Menu Template | |
Monitor | LTR: gulp monitor --Layout="vertical-menu-template" --LayoutName="my-vertical-menu-template" --TextDirection="LTR" RTL: gulp monitor --Layout="vertical-menu-template" --LayoutName="my-vertical-menu-template" --TextDirection="RTL" |
HTML Generation | LTR: gulp dist-html --Layout="vertical-menu-template" --LayoutName="my-vertical-menu-template" --TextDirection="LTR" RTL: gulp dist-html --Layout="vertical-menu-template" --LayoutName="my-vertical-menu-template" --TextDirection="RTL" |
Starter Kit Generation | LTR: gulp dist-sk-html --Layout="vertical-menu-template" --LayoutName="my-vertical-menu-template" --TextDirection="LTR" RTL: gulp dist-sk-html --Layout="vertical-menu-template" --LayoutName="my-vertical-menu-template" --TextDirection="RTL" |
Vertical Modern Menu Template | |
Monitor | LTR: gulp monitor --Layout="vertical-modern-menu-template" --LayoutName="my-vertical-modern-menu-template" --TextDirection="LTR" RTL: gulp monitor --Layout="vertical-modern-menu-template" --LayoutName="my-vertical-modern-menu-template" --TextDirection="RTL" |
HTML Generation | LTR: gulp dist-html --Layout="vertical-modern-menu-template" --LayoutName="my-vertical-modern-menu-template" --TextDirection="LTR" RTL: gulp dist-html --Layout="vertical-modern-menu-template" --LayoutName="my-vertical-modern-menu-template" --TextDirection="RTL" |
Starter Kit Generation | LTR: gulp dist-sk-html --Layout="vertical-modern-menu-template" --LayoutName="my-vertical-modern-menu-template" --TextDirection="LTR" RTL: gulp dist-sk-html --Layout="vertical-modern-menu-template" --LayoutName="my-vertical-modern-menu-template" --TextDirection="RTL" |
Semi Dark Vertical Menu Template | |
Monitor | LTR: gulp monitor --Layout="vertical-menu-template-semi-dark" --LayoutName="my-vertical-menu-template-semi-dark" --TextDirection="LTR" RTL: gulp monitor --Layout="vertical-menu-template-semi-dark" --LayoutName="my-vertical-menu-template-semi-dark" --TextDirection="RTL" |
HTML Generation | LTR: gulp dist-html --Layout="vertical-menu-template-semi-dark" --LayoutName="my-vertical-menu-template-semi-dark" --TextDirection="LTR" RTL: gulp dist-html --Layout="vertical-menu-template-semi-dark" --LayoutName="my-vertical-menu-template-semi-dark" --TextDirection="RTL" |
Starter Kit Generation | LTR: gulp dist-sk-html --Layout="vertical-menu-template-semi-dark" --LayoutName="my-vertical-menu-template-semi-dark" --TextDirection="LTR" RTL: gulp 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: gulp monitor --Layout="vertical-menu-template-nav" --LayoutName="my-vertical-menu-template-nav" --TextDirection="LTR" RTL: gulp monitor --Layout="vertical-menu-template-nav" --LayoutName="my-vertical-menu-template-nav" --TextDirection="RTL" |
HTML Generation | LTR: gulp dist-html --Layout="vertical-menu-template-nav" --LayoutName="my-vertical-menu-template-nav" --TextDirection="LTR" RTL: gulp dist-html --Layout="vertical-menu-template-nav" --LayoutName="my-vertical-menu-template-nav" --TextDirection="RTL" |
Starter Kit Generation | LTR: gulp dist-sk-html --Layout="vertical-menu-template-nav" --LayoutName="my-vertical-menu-template-nav" --TextDirection="LTR" RTL: gulp dist-sk-html --Layout="vertical-menu-template-nav" --LayoutName="my-vertical-menu-template-nav" --TextDirection="RTL" |
Light Vertical Menu Template | |
Monitor | LTR: gulp monitor --Layout="vertical-menu-template-light" --LayoutName="my-vertical-menu-template-light" --TextDirection="LTR" RTL: gulp monitor --Layout="vertical-menu-template-light" --LayoutName="my-vertical-menu-template-light" --TextDirection="RTL" |
HTML Generation | LTR: gulp dist-html --Layout="vertical-menu-template-light" --LayoutName="my-vertical-menu-template-light" --TextDirection="LTR" RTL: gulp dist-html --Layout="vertical-menu-template-light" --LayoutName="my-vertical-menu-template-light" --TextDirection="RTL" |
Starter Kit Generation | LTR: gulp dist-sk-html --Layout="vertical-menu-template-light" --LayoutName="my-vertical-menu-template-light" --TextDirection="LTR" RTL: gulp dist-sk-html --Layout="vertical-menu-template-light" --LayoutName="my-vertical-menu-template-light" --TextDirection="RTL" |
Vertical Overlay Menu Template | |
Monitor | LTR: gulp monitor --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="LTR" RTL: gulp monitor --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="RTL" |
HTML Generation | LTR: gulp dist-html --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="LTR" RTL: gulp dist-html --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="RTL" |
Starter Kit Generation | LTR: gulp dist-sk-html --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="LTR" RTL: gulp dist-html --Layout="vertical-overlay-menu-template" --LayoutName="my-vertical-overlay-menu-template" --TextDirection="RTL" |
Horizontal Menu Template | |
Monitor | LTR: gulp monitor --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="LTR" RTL: gulp monitor --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="RTL" |
HTML Generation | LTR: gulp dist-html --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="LTR" RTL: gulp dist-html --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="RTL" |
Starter Kit Generation | LTR: gulp dist-sk-html --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="LTR" RTL: gulp dist-html --Layout="horizontal-menu-template" --LayoutName="my-horizontal-menu-template" --TextDirection="RTL" |
Full Width Horizontal Menu Template | |
Monitor | LTR: gulp monitor --Layout="horizontal-menu-template-nav" --LayoutName="my-horizontal-menu-template-nav" --TextDirection="LTR" RTL: gulp monitor --Layout="horizontal-menu-template-nav" --LayoutName="my-horizontal-menu-template-nav" --TextDirection="RTL" |
HTML Generation | LTR: gulp dist-html --Layout="horizontal-menu-template-nav" --LayoutName="my-horizontal-menu-template-nav" --TextDirection="LTR" RTL: gulp dist-html --Layout="horizontal-menu-template-nav" --LayoutName="my-horizontal-menu-template-nav" --TextDirection="RTL" |
Starter Kit Generation | LTR: gulp dist-sk-html --Layout="horizontal-menu-template-nav" --LayoutName="my-horizontal-menu-template-nav" --TextDirection="LTR" RTL: gulp dist-html --Layout="horizontal-menu-template-nav" --LayoutName="my-horizontal-menu-template-nav" --TextDirection="RTL" |