Logo

Documentation v8.0.9

  • Getting Started
  • Build
  • Gulp

Quick Links

25 pending tasks
Accounting eCommerce
Administration Console
Projects Pending Tasks
Customers Latest cases
View All

Notifications 24 reports

Project Alice
Phase 1 development
1 hr
HR Confidential
Confidential staff documents
2 hrs
Company HR
Corporeate staff profiles
5 hrs
Project Redux
New frontend admin theme
2 days
Project Breafing
Product launch status update
21 Jan
Banner Assets
Collection of banner images
21 Jan
Icon Assets
Collection of SVG icons
20 March
View All

Get Pro Access

Outlines keep you honest. They stoping you from amazing poorly about drive
Upgrade
metronic
200 OK New order
Just now
500 ERR New customer
2 hrs
200 OK Payment process
5 hrs
300 WRN Search query
2 days
200 OK API connection
1 week
200 OK Database restore
Mar 5
300 WRN System update
May 15
300 WRN Server OS update
Apr 3
300 WRN API rollback
Jun 30
500 ERR Refund process
Jul 10
500 ERR Withdrawal process
Sep 10
500 ERR Mail tasks
Dec 10
View All
Metronic's Gulpbuild tools provide easy package management and production deployment for any type of web application that also comes with powerful asset bundle tools to organize assets structure with custom bundling for production.

Gulp Quick Start

  1. Download the latest theme source from the Marketplace.
  2. Download and install Node.js from Nodejs. The suggested version to install is 14.16.x LTS.
  3. Start a command prompt window or terminal and change directory to [unpacked path]/theme/tools/: 
    cd theme/tools/
  4. Install the latest NPM: 
    npm install --global npm@latest
  5. Install Yarn via the NPM: 
    npm install --global yarn
    Don't forget to run yarn upgradeafter every Metronic update is released in order to receive newly added or updated 3rd-party plugins.
    Use npm cache clean --forcecommand, if the installation had failed at any step. Retry again from beginning once it's done.
  6. Gulp is a toolkit that helps you automate your time-consuming tasks in development workflow. To install gulp globally: 
    npm install --global gulp-cli
    If you have previously installed a version of gulp globally, remove it to make sure old version doesn't collide with new gulp-cli: 
    npm rm --global gulp
    Verify that gulp in successfully installed, and version of installed gulp will appear: 
    gulp --version
  7. Install yarn dependencies. Must execute in [unpacked path]/theme/tools/folder. 
    yarn
  8. The below command will compile all the assets(sass, js, media) to dist/assets/folder: State which demo to compile and append at the end of the command. Eg. --demo1 
    gulp --demo1
    If you had any error at this step during compilation. Try to update gulpto the latest version. npm install --global gulp-cli
  9. Start the localhost server: 
    gulp localhost --demo1
    Keep the console open. Open this link to run http://localhost:8080/. It will take a few seconds for the build to finish. To stop a localhost environment, press Ctrl+C.

Gulp Build Options

The build config file is located at tools/gulp.config.jsonand you can fully customize the build settings to meet your project requirements.
{
    "name": "{theme}",
    "desc": "Gulp build config file",
    "version": "{version}",
    "config": {
        "debug": false,
        "compile": {
            "rtl": {
                "enabled": false,
                "skip": [
                    "select2",
                    "line-awesome",
                    "fontawesome5",
                    "nouislider",
                    "tinymce",
                    "sweetalert2"
                ]
            },
            "jsUglify": false,
            "cssMinify": true,
            "jsSourcemaps": false,
            "cssSourcemaps": false
        },
        "path": {
            "src": "../../../themes/{theme}/html/src",
            "common_src": "../src",
            "node_modules": "node_modules"
        },
        "dist": [
            "../../../themes/{theme}/html/dist/assets"
        ]
    },
    "build": {
        "base": {
            "src": {
                "styles": [
                    "{$config.path.src}/sass/style.scss"
                ],
                "scripts": [
                    "{$config.path.common_src}/js/components/**/*.js",
                    "{$config.path.common_src}/js/layout/**/*.js",
                    "{$config.path.src}/js/layout/**/*.js"
                ]
            },
            "dist": {
                "styles": "{$config.dist}/css/style.bundle.css",
                "scripts": "{$config.dist}/js/scripts.bundle.js"
            }
        },
        "plugins": {
            "global": {
                "src": {
                    "mandatory": {
                        "jquery": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery/dist/jquery.js"
                            ]
                        },
                        "popper.js": {
                            "scripts": [
                                "{$config.path.node_modules}/@popperjs/core/dist/umd/popper.js"
                            ]
                        },
                        "bootstrap": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap/dist/js/bootstrap.min.js"
                            ]
                        },
                        "moment": {
                            "scripts": [
                                "{$config.path.node_modules}/moment/min/moment-with-locales.min.js"
                            ]
                        },
                        "perfect-scrollbar": {
                            "styles": [
                                "{$config.path.node_modules}/perfect-scrollbar/css/perfect-scrollbar.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/perfect-scrollbar/dist/perfect-scrollbar.js"
                            ]
                        },
                        "wnumb": {
                            "scripts": [
                                "{$config.path.node_modules}/wnumb/wNumb.js"
                            ]
                        }
                    },
                    "optional": {
                        "select2": {
                            "styles": [
                                "{$config.path.node_modules}/select2/dist/css/select2.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/select2/dist/js/select2.full.js",
                                "{$config.path.common_src}/js/vendors/plugins/select2.init.js"
                            ]
                        },
                        "flatpickr": {
                            "styles": [
                                "{$config.path.node_modules}/flatpickr/dist/flatpickr.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/flatpickr/dist/flatpickr.js",
                                "{$config.path.common_src}/js/vendors/plugins/flatpickr.init.js"
                            ]
                        },
                        "formvalidation": {
                            "styles": [
                                "{$config.path.common_src}/plugins/formvalidation/dist/css/formValidation.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/es6-shim/es6-shim.min.js",
                                "{$config.path.common_src}/plugins/formvalidation/dist/js/FormValidation.full.min.js",
                                "{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/Bootstrap5.min.js"
                            ]
                        },
                        "daterangepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js"
                            ]
                        },
                        "bootstrap-maxlength": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-maxlength/src/bootstrap-maxlength.js"
                            ]
                        },
                        "bootstrap-multiselectsplitter": {
                            "scripts": [
                                "{$config.path.common_src}/plugins/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js"
                            ]
                        },
                        "inputmask": {
                            "scripts": [
                                "{$config.path.node_modules}/inputmask/dist/inputmask.js",
                                "{$config.path.node_modules}/inputmask/dist/bindings/inputmask.binding.js",
                                "{$config.path.node_modules}/inputmask/dist/lib/extensions/inputmask.date.extensions.js",
                                "{$config.path.node_modules}/inputmask/dist/lib/extensions/inputmask.numeric.extensions.js"
                            ]
                        },
                        "nouislider": {
                            "styles": [
                                "{$config.path.node_modules}/nouislider/distribute/nouislider.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/nouislider/distribute/nouislider.js"
                            ]
                        },
                        "autosize": {
                            "scripts": [
                                "{$config.path.node_modules}/autosize/dist/autosize.js"
                            ]
                        },
                        "clipboard": {
                            "scripts": [
                                "{$config.path.node_modules}/clipboard/dist/clipboard.min.js"
                            ]
                        },
                        "dropzone": {
                            "styles": [
                                "{$config.path.node_modules}/dropzone/dist/dropzone.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/dropzone/dist/dropzone.js",
                                "{$config.path.common_src}/js/vendors/plugins/dropzone.init.js"
                            ]
                        },
                        "quil": {
                            "styles": [
                                "{$config.path.node_modules}/quill/dist/quill.snow.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/quill/dist/quill.js"
                            ]
                        },
                        "tiny-slider": {
                            "styles": [
                                "{$config.path.node_modules}/tiny-slider/dist/tiny-slider.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/tiny-slider/dist/tiny-slider.js"
                            ]
                        },
                        "tagify": {
                            "styles": [
                                "{$config.path.node_modules}/@yaireo/tagify/dist/tagify.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/@yaireo/tagify/dist/tagify.polyfills.min.js",
                                "{$config.path.node_modules}/@yaireo/tagify/dist/tagify.min.js"
                            ]
                        },
                        "bootstrap-markdown": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-markdown/css/bootstrap-markdown.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/markdown/lib/markdown.js",
                                "{$config.path.node_modules}/bootstrap-markdown/js/bootstrap-markdown.js",
                                "{$config.path.common_src}/js/vendors/plugins/bootstrap-markdown.init.js"
                            ]
                        },
                        "animate.css": {
                            "styles": [
                                "{$config.path.node_modules}/animate.css/animate.css"
                            ]
                        },
                        "toastr": {
                            "styles": [
                                "{$config.path.node_modules}/toastr/build/toastr.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/toastr/build/toastr.min.js"
                            ]
                        },
                        "dual-listbox": {
                            "styles": [
                                "{$config.path.node_modules}/dual-listbox/dist/dual-listbox.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/dual-listbox/dist/dual-listbox.js"
                            ]
                        },
                        "apexcharts": {
                            "styles": [
                                "{$config.path.node_modules}/apexcharts/dist/apexcharts.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/apexcharts/dist/apexcharts.min.js"
                            ]
                        },
                        "chart.js": {
                            "styles": [
                                "{$config.path.node_modules}/chart.js/dist/Chart.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/chart.js/dist/Chart.js"
                            ]
                        },
                        "bootstrap-session-timeout": {
                            "scripts": [
                                "{$config.path.common_src}/plugins/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js"
                            ]
                        },
                        "jquery-idletimer": {
                            "scripts": [
                                "{$config.path.common_src}/plugins/jquery-idletimer/idle-timer.min.js"
                            ]
                        },
                        "countup.js": {
                            "scripts": [
                                "{$config.path.node_modules}/countup.js/dist/countUp.umd.js"
                            ]
                        },
                        "sweetalert2": {
                            "styles": [
                                "{$config.path.node_modules}/sweetalert2/dist/sweetalert2.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/es6-promise-polyfill/promise.min.js",
                                "{$config.path.node_modules}/sweetalert2/dist/sweetalert2.min.js",
                                "{$config.path.common_src}/js/vendors/plugins/sweetalert2.init.js"
                            ]
                        },
                        "line-awesome": {
                            "styles": [
                                "{$config.path.node_modules}/line-awesome/dist/line-awesome/css/line-awesome.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/line-awesome/dist/line-awesome/fonts/**"
                            ]
                        },
                        "bootstrap-icons": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-icons/font/bootstrap-icons.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/bootstrap-icons/font/fonts/**"
                            ]
                        },
                        "@fortawesome": {
                            "styles": [
                                "{$config.path.node_modules}/@fortawesome/fontawesome-free/css/all.min.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/@fortawesome/fontawesome-free/webfonts/**"
                            ]
                        }
                    },
                    "override": {
                        "styles": [
                            "{$config.path.src}/sass/plugins.scss"
                        ]
                    }
                },
                "dist": {
                    "styles": "{$config.dist}/plugins/global/plugins.bundle.css",
                    "scripts": "{$config.dist}/plugins/global/plugins.bundle.js",
                    "images": "{$config.dist}/plugins/global/images",
                    "fonts": "{$config.dist}/plugins/global/fonts"
                }
            },
            "custom": {
                "draggable": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.bundle.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.bundle.legacy.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/sortable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/droppable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/swappable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/collidable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/resize-mirror.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/snappable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/swap-animation.js"
                        ]
                    },
                    "dist": {
                        "scripts": "{$config.dist}/plugins/custom/draggable/draggable.bundle.js"
                    }
                },
                "prismjs": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/prism-themes/themes/prism-shades-of-purple.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/prismjs/prism.js",
                            "{$config.path.node_modules}/prismjs/components/prism-bash.js",
                            "{$config.path.node_modules}/prismjs/components/prism-javascript.js",
                            "{$config.path.node_modules}/prismjs/components/prism-scss.js",
                            "{$config.path.node_modules}/prismjs/components/prism-css.js",
                            "{$config.path.node_modules}/prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js",
                            "{$config.path.common_src}/js/vendors/plugins/prism.init.js"
                        ]
                    },
                    "dist": {
                        "styles": "{$config.dist}/plugins/custom/prismjs/prismjs.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/prismjs/prismjs.bundle.js"
                    }
                },
                "fullcalendar": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/@fullcalendar/core/main.css",
                            "{$config.path.node_modules}/@fullcalendar/daygrid/main.css",
                            "{$config.path.node_modules}/@fullcalendar/list/main.css",
                            "{$config.path.node_modules}/@fullcalendar/timegrid/main.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/@fullcalendar/core/main.js",
                            "{$config.path.node_modules}/@fullcalendar/daygrid/main.js",
                            "{$config.path.node_modules}/@fullcalendar/google-calendar/main.js",
                            "{$config.path.node_modules}/@fullcalendar/interaction/main.js",
                            "{$config.path.node_modules}/@fullcalendar/list/main.js",
                            "{$config.path.node_modules}/@fullcalendar/timegrid/main.js"
                        ]
                    },
                    "dist": {
                        "styles": "{$config.dist}/plugins/custom/fullcalendar/fullcalendar.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/fullcalendar/fullcalendar.bundle.js"
                    }
                },
                "gmaps": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/gmaps/gmaps.js"
                        ]
                    },
                    "dist": {
                        "scripts": "{$config.dist}/plugins/custom/gmaps/gmaps.js"
                    }
                },
                "flot": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/flot/dist/es5/jquery.flot.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.resize.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.categories.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.pie.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.stack.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.crosshair.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.axislabels.js"
                        ]
                    },
                    "dist": {
                        "scripts": "{$config.dist}/plugins/custom/flot/flot.bundle.js"
                    }
                },
                "datatables.net": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/datatables.net-bs4/css/dataTables.bootstrap4.css",
                            "{$config.path.node_modules}/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-autofill-bs4/css/autoFill.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-keytable-bs4/css/keyTable.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-select-bs4/css/select.bootstrap4.min.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/datatables.net/js/jquery.dataTables.js",
                            "{$config.path.common_src}/js/vendors/plugins/datatables.init.js",
                            "{$config.path.node_modules}/datatables.net-autofill/js/dataTables.autoFill.min.js",
                            "{$config.path.node_modules}/datatables.net-autofill-bs4/js/autoFill.bootstrap4.min.js",
                            "{$config.path.node_modules}/jszip/dist/jszip.min.js",
                            "{$config.path.node_modules}/pdfmake/build/pdfmake.min.js",
                            "{$config.path.node_modules}/pdfmake/build/vfs_fonts.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/dataTables.buttons.min.js",
                            "{$config.path.node_modules}/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.colVis.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.flash.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.html5.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.print.js",
                            "{$config.path.node_modules}/datatables.net-colreorder/js/dataTables.colReorder.min.js",
                            "{$config.path.node_modules}/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
                            "{$config.path.node_modules}/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
                            "{$config.path.node_modules}/datatables.net-keytable/js/dataTables.keyTable.min.js",
                            "{$config.path.node_modules}/datatables.net-responsive/js/dataTables.responsive.min.js",
                            "{$config.path.node_modules}/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js",
                            "{$config.path.node_modules}/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
                            "{$config.path.node_modules}/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
                            "{$config.path.node_modules}/datatables.net-scroller/js/dataTables.scroller.min.js",
                            "{$config.path.node_modules}/datatables.net-select/js/dataTables.select.min.js"
                        ]
                    },
                    "dist": {
                        "styles": "{$config.dist}/plugins/custom/datatables/datatables.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/datatables/datatables.bundle.js"
                    }
                },
                "jkanban": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/jkanban/dist/jkanban.min.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/jkanban/dist/jkanban.min.js"
                        ]
                    },
                    "dist": {
                        "styles": "{$config.dist}/plugins/custom/kanban/kanban.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/kanban/kanban.bundle.js"
                    }
                },
                "leaflet": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/leaflet/dist/leaflet.css",
                            "{$config.path.node_modules}/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/leaflet/dist/leaflet.js",
                            "{$config.path.node_modules}/esri-leaflet/dist/esri-leaflet.js",
                            "{$config.path.node_modules}/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.js"
                        ]
                    },
                    "dist": {
                        "styles": "{$config.dist}/plugins/custom/leaflet/leaflet.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/leaflet/leaflet.bundle.js"
                    }
                }
            }
        },
        "custom": {
            "src": {
                "styles": [
                    "{$config.path.common_src}/sass/custom/**/*.scss",
                    "{$config.path.src}/sass/custom/**/*.scss"
                ],
                "scripts": [
                    "{$config.path.common_src}/js/custom/**/*.js",
                    "{$config.path.src}/js/custom/**/*.js"
                ]
            },
            "dist": {
                "styles": "{$config.dist}/css/custom/",
                "scripts": "{$config.dist}/js/custom/"
            }
        },
        "media": {
            "src": {
                "media": [
                    "{$config.path.src}/media/**/*.*",
                    "{$config.path.common_src}/media/**/*.*"
                ]
            },
            "dist": {
                "media": "{$config.dist}/media/"
            }
        },
        "api": {
            "src": {
                "media": [
                    "{$config.path.src}/api/**/*.*",
                    "{$config.path.common_src}/api/**/*.*"
                ]
            },
            "dist": {
                "media": "{$config.dist}/api/"
            }
        }
    }
}

Required Core CSS and JS files

The core CSS and JS files defined under build.plugins.base.src.mandatoryand build.theme.baseare required in order to have the theme's basic functionality up. However the assets defined build.plugins.base.src.optionalare optional.
Gulp Build Options
Field Type Description
config.debug boolean Enable/disable debug console log.
config.compile.rtl.enabled boolean Enable/disable compilation with RTL version of CSS along with default LTR CSS.
config.compile.rtl.skip array An array of plugin to be skipped from being compile as RTL.
config.compile.jsMinify boolean Enable/disable output Javascript minify.
config.compile.cssMinify boolean Enable/disable output CSS minify.
config.compile.jsSourcemaps boolean Enable/disable output Javascript with sourcemaps.
config.compile.cssSourcemaps boolean Enable/disable output CSS with sourcemaps.
config.dist object dist  stands for distributable  and refers to the directories where the minified and bundled assets will be stored for production uses.
Build Items
build.base object This object specifies the global assets of the demo to be added into the global css and js demo bundles.
build.plugins.global object This object specifies required 3rd party resources to be added into the global css and js plugins bundles.
build.plugins.custom object This object specifies global 3rd party resources to be added into the custom css and js plugins bundles.
build.custom object This object specifies custom assets that are included on demand.
build.media object Media folder.
build.api object Server side scripts used for examples with remote data source(e.g: ajax datatables, dropdown list, quick search results, etc).

Gulp Build Tasks

Update the Node.js, global npmand yarnto the latest versions for any errors related to node-sass.
If the gulpcommand is not working, try to remove tools/node_modulesfolder, and reinstall dependencies using yarn.

Launch your terminal and change its current directory to the project's tools folder where the build files are located. All commands below must be run in this tools folder.

cd theme/tools/

For the first time, run the command below to install the npm dependencies defined in /tools/package.json(if you haven't done it) :

yarn

After every modification in [demo]/src/, run the below task to compile the assets as defined in /tools/gulp.config.json:

gulp --demo1

Provide parameter --rtl=trueto the gulp task. This command will disable RTL CSS from generating. If this param does not exist, by default, RTL CSS will be generated.

gulp --rtl=true --demo1

Provide parameter --jsto the gulp task. This command will generate javascript assets only.

gulp --js --demo1

Provide parameter --sassto the gulp task. This command will generate SCSS, SASS and CSS assets only.

gulp --sass --demo1

Provide parameter --mediato the gulp task. This command will generate all media, fonts, images, etc. assets only.

gulp --media --demo1

Provide parameter --prodto the gulp task. This command will minify all the JS and CSS.

gulp --prod --demo1

The customization should be done in theme/src/folder. After compilation refer to the destination folder theme/dist/. The bellow command is to start a real-time watcher. This task watches the SCSS and Javascript files and automatically recompile whenever the source files are changed. You also can run watcher separately for JS and SCSS.

gulp watch --demo1

Localhost

Metronic uses Gulp-connectplugin use to run a simple webserver for quick browsing the HTML templatest:

gulp localhost --demo1

Keep the console open. Open this link to run http://localhost:8080/. The default running port is 8080and in case, this port being used by other application, it can be changed in tools/gulp/watch.js

connect.server({
  root: '../dist',
  livereload: true,
  port: 8081,
});

Activity Logs

There are 2 new tasks for you in “AirPlus Mobile APp” project:
Added at 4:23 PM by
img
Meeting with customer
Application Design
img
img
A
In Progress
View
Project Delivery Preparation
CRM System Development
img
B
Completed
View
Invitation for crafting engaging designs that speak human workshop
Sent at 4:23 PM by
img
3 New Incoming Project Files:
Sent at 10:30 PM by
img
Finance KPI App Guidelines
1.9mb
Client UAT Testing Results
18kb
Finance Reports
20mb
Task #45890merged with #45890in “Ads Pro Admin Dashboard project:
Initiated at 4:23 PM by
img
3 new application design concepts added:
Created at 4:23 PM by
img
img
Explore
img
Explore
img
Explore
New case #67890is assigned to you in Multi-platform Database Design project
Added at 4:23 PM by
Alice Tan
You have received a new order:
Placed at 5:05 AM by
img

Database Backup Process Completed!

Login into Metronic Admin Dashboard to make sure the data integrity is OK
Proceed
New order #67890is placed for Workshow Planning & Budget Estimation
Placed at 4:23 PM by
Jimmy Bold
View All Activities
Pic
Brian Cox 2 mins
How likely are you to recommend our company to your friends and family ?
5 mins You
Pic
Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
Pic
Brian Cox 1 Hour
Ok, Understood!
2 Hours You
Pic
You’ll receive notifications for all issues, pull requests!
Pic
Brian Cox 3 Hours
You can unwatch this repository immediately by clicking here: Keenthemes.com
4 Hours You
Pic
Most purchased Business courses during this sale!
Pic
Brian Cox 5 Hours
Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided
Just now You
Pic
Pic
Brian Cox Just now
Right before vacation season we have the next Big Deal for you.

Explore Metronic

Demo1

demo
Preview

Demo2

demo
Coming soon

Demo3

demo
Coming soon

Demo4

demo
Coming soon

Demo5

demo
Preview

Demo6

demo
Coming soon

Demo7

demo
Coming soon

Demo8

demo
Coming soon

Demo9

demo
Coming soon

Demo10

demo
Coming soon

Demo11

demo
Coming soon

Demo12

demo
Coming soon

Demo13

demo
Coming soon

Demo14

demo
Coming soon

Demo15

demo
Coming soon
Purchase Metronic