Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

To use most of the Metronic build tools, Node.js LTS version is required. Some of the plugins and framework in Metronic does not yet support the latest Node.js version.

## Gulp

### Overview

Metronic build tools provides 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.
Metronic's central `gulp.config.json` build config files allows you manage the entire assest bundling for production by taking advantage of `yarn` package manager.

### Build Config

The build config file is located at`[metronic]/theme/html/tools/gulp.config.json` and you can fully customize the build settings to meet your project requirements:

Check the dist output path `config.dist` for the build tools to output the compilation.

    {
        "name": "metronic",
        "theme": "metronic",
        "desc": "Metronic build config file for Gulp",
        "version": "7.0.9",
        "config": {
            "debug": false,
            "compile": {
                "rtl": {
                    "enabled": true,
                    "skip": [
                        "select2",
                        "socicon",
                        "line-awesome",
                        "flaticon",
                        "flaticon2",
                        "fontawesome5",
                        "jstree",
                        "owl.carousel",
                        "fullcalendar",
                        "bootstrap-datepicker",
                        "bootstrap-switch",
                        "tempusdominus-bootstrap-4",
                        "nouislider",
                        "tinymce",
                        "sweetalert2",
                        "jquery-mask-plugin"
                    ]
                },
                "jsMinify": false,
                "cssMinify": false,
                "jsSourcemaps": false,
                "cssSourcemaps": false
            },
            "path": {
                "src": "./../{demo}/src",
                "node_modules": "./node_modules"
            },
            "dist": [
                "./../{demo}/dist/assets"
            ]
        },
        "build": {
            "main": {
                "src": {
                    "styles": [
                        "{$config.path.src}/sass/style.scss"
                    ],
                    "scripts": [
                        "{$config.path.src}/js/components/**/*.js",
                        "{$config.path.src}/js/layout/**/*.js"
                    ]
                },
                "bundle": {
                    "styles": "{$config.dist}/css/style.bundle.css",
                    "scripts": "{$config.dist}/js/scripts.bundle.js"
                }
            },
            "vendors": {
                "base": {
                    "src": {
                        "mandatory": {
                            "jquery": {
                                "scripts": [
                                    "{$config.path.node_modules}/jquery/dist/jquery.js"
                                ]
                            },
                            "popper.js": {
                                "scripts": [
                                    "{$config.path.node_modules}/popper.js/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"
                                ]
                            },
                            "keenthemes-icons": {
                                "styles": [
                                    "{$config.path.src}/plugins/keenthemes-icons/font/ki.css"
                                ],
                                "fonts": [
                                    "{$config.path.src}/plugins/keenthemes-icons/font/**"
                                ]
                            }
                        },
                        "optional": {
                            "formvalidation": {
                                "styles": [
                                    "{$config.path.src}/plugins/formvalidation/dist/css/formValidation.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/es6-shim/es6-shim.min.js",
                                    "{$config.path.src}/plugins/formvalidation/dist/js/FormValidation.full.min.js",
                                    "{$config.path.src}/plugins/formvalidation/dist/js/plugins/Bootstrap.min.js",
                                    "{$config.path.src}/plugins/formvalidation/dist/js/plugins/Bootstrap.min.js"
                                ]
                            },
                            "block-ui": {
                                "scripts": [
                                    "{$config.path.node_modules}/block-ui/jquery.blockUI.js"
                                ]
                            },
                            "bootstrap-datepicker": {
                                "styles": [
                                    "{$config.path.node_modules}/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
                                    "{$config.path.src}/js/vendors/plugins/bootstrap-datepicker.init.js"
                                ]
                            },
                            "tempusdominus-bootstrap-4": {
                                "styles": [
                                    "{$config.path.node_modules}/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js",
                                    "{$config.path.src}/js/vendors/plugins/tempusdominus-bootstrap-4.init.js"
                                ]
                            },
                            "bootstrap-timepicker": {
                                "styles": [
                                    "{$config.path.node_modules}/bootstrap-timepicker/css/bootstrap-timepicker.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
                                    "{$config.path.src}/js/vendors/plugins/bootstrap-timepicker.init.js"
                                ]
                            },
                            "bootstrap-daterangepicker": {
                                "styles": [
                                    "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js"
                                ]
                            },
                            "bootstrap-touchspin": {
                                "styles": [
                                    "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.js"
                                ]
                            },
                            "bootstrap-maxlength": {
                                "scripts": [
                                    "{$config.path.node_modules}/bootstrap-maxlength/src/bootstrap-maxlength.js"
                                ]
                            },
                            "bootstrap-multiselectsplitter": {
                                "scripts": [
                                    "{$config.path.src}/plugins/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js"
                                ]
                            },
                            "bootstrap-select": {
                                "styles": [
                                    "{$config.path.node_modules}/bootstrap-select/dist/css/bootstrap-select.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/bootstrap-select/dist/js/bootstrap-select.js"
                                ]
                            },
                            "bootstrap-switch": {
                                "styles": [
                                    "{$config.path.node_modules}/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/bootstrap-switch/dist/js/bootstrap-switch.js",
                                    "{$config.path.src}/js/vendors/plugins/bootstrap-switch.init.js"
                                ]
                            },
                            "select2": {
                                "styles": [
                                    "{$config.path.node_modules}/select2/dist/css/select2.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/select2/dist/js/select2.full.js"
                                ]
                            },
                            "ion-rangeslider": {
                                "styles": [
                                    "{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/ion-rangeslider/js/ion.rangeSlider.js"
                                ],
                                "images": [
                                    "{$config.path.node_modules}/ion-rangeslider/img/sprite-skin-flat.png"
                                ]
                            },
                            "typeahead.js": {
                                "scripts": [
                                    "{$config.path.node_modules}/typeahead.js/dist/typeahead.bundle.js",
                                    "{$config.path.node_modules}/handlebars/dist/handlebars.js"
                                ]
                            },
                            "inputmask": {
                                "scripts": [
                                    "{$config.path.node_modules}/inputmask/dist/jquery.inputmask.bundle.js",
                                    "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.date.extensions.js",
                                    "{$config.path.node_modules}/inputmask/dist/inputmask/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.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"
                                ]
                            },
                            "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"
                                ]
                            },
                            "summernote": {
                                "styles": [
                                    "{$config.path.node_modules}/summernote/dist/summernote-bs4.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/summernote/dist/summernote-bs4.js"
                                ],
                                "fonts": [
                                    "{$config.path.node_modules}/summernote/dist/font/**"
                                ]
                            },
                            "bootstrap-makrdown": {
                                "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.src}/js/vendors/plugins/bootstrap-markdown.init.js"
                                ]
                            },
                            "remarkable-bootstrap-notify": {
                                "scripts": [
                                    "{$config.path.node_modules}/bootstrap-notify/bootstrap-notify.min.js",
                                    "{$config.path.src}/js/vendors/plugins/bootstrap-notify.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"
                                ]
                            },
                            "bootstrap-session-timeout": {
                                "scripts": [
                                    "{$config.path.src}/plugins/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js"
                                ]
                            },
                            "jquery-idletimer": {
                                "scripts": [
                                    "{$config.path.src}/plugins/jquery-idletimer/idle-timer.min.js"
                                ]
                            },
                            "counterup": {
                                "scripts": [
                                    "{$config.path.node_modules}/waypoints/lib/jquery.waypoints.js",
                                    "{$config.path.node_modules}/counterup/jquery.counterup.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.src}/js/vendors/plugins/sweetalert2.init.js"
                                ]
                            },
                            "jquery-mask-plugin": {
                                "scripts": [
                                    "{$config.path.node_modules}/jquery-mask-plugin/dist/jquery.mask.js"
                                ]
                            },
                            "sticky-js": {
                                "scripts": [
                                    "{$config.path.node_modules}/sticky-js/dist/sticky.min.js"
                                ]
                            },
                            "jquery.repeater": {
                                "scripts": [
                                    "{$config.path.node_modules}/jquery.repeater/src/lib.js",
                                    "{$config.path.node_modules}/jquery.repeater/src/jquery.input.js",
                                    "{$config.path.node_modules}/jquery.repeater/src/repeater.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/**"
                                ]
                            },
                            "flaticon": {
                                "styles": [
                                    "{$config.path.src}/plugins/flaticon/flaticon.css"
                                ],
                                "fonts": [
                                    "{$config.path.src}/plugins/flaticon/font/**"
                                ]
                            },
                            "flaticon2": {
                                "styles": [
                                    "{$config.path.src}/plugins/flaticon2/flaticon.css"
                                ],
                                "fonts": [
                                    "{$config.path.src}/plugins/flaticon2/font/**"
                                ]
                            },
                            "socicon": {
                                "styles": [
                                    "{$config.path.node_modules}/socicon/css/socicon.css"
                                ],
                                "fonts": [
                                    "{$config.path.node_modules}/socicon/font/**"
                                ]
                            },
                            "@fortawesome": {
                                "styles": [
                                    "{$config.path.node_modules}/@fortawesome/fontawesome-free/css/all.min.css"
                                ],
                                "fonts": [
                                    "{$config.path.node_modules}/@fortawesome/fontawesome-free/webfonts/**"
                                ]
                            }
                        }
                    },
                    "bundle": {
                        "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"
                            ]
                        },
                        "bundle": {
                            "scripts": "{$config.dist}/plugins/custom/draggable/draggable.bundle.js"
                        }
                    },
                    "prismjs": {
                        "src": {
                            "styles": [
                                "{$config.path.node_modules}/prismjs/themes/prism.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/prismjs/prism.js",
                                "{$config.path.node_modules}/prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js",
                                "{$config.path.src}/js/vendors/plugins/prism.init.js"
                            ]
                        },
                        "bundle": {
                            "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"
                            ]
                        },
                        "bundle": {
                            "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"
                            ]
                        },
                        "bundle": {
                            "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"
                            ]
                        },
                        "bundle": {
                            "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.node_modules}/datatables.net-bs4/js/dataTables.bootstrap4.js",
                                "{$config.path.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"
                            ]
                        },
                        "bundle": {
                            "styles": "{$config.dist}/plugins/custom/datatables/datatables.bundle.css",
                            "scripts": "{$config.dist}/plugins/custom/datatables/datatables.bundle.js"
                        }
                    },
                    "jstree": {
                        "src": {
                            "styles": [
                                "{$config.path.node_modules}/jstree/dist/themes/default/style.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/jstree/dist/jstree.js"
                            ],
                            "images": [
                                "{$config.path.src}/media/plugins/jstree/32px.png",
                                "{$config.path.node_modules}/jstree/dist/themes/default/throbber.gif"
                            ]
                        },
                        "bundle": {
                            "styles": "{$config.dist}/plugins/custom/jstree/jstree.bundle.css",
                            "scripts": "{$config.dist}/plugins/custom/jstree/jstree.bundle.js",
                            "images": "{$config.dist}/plugins/custom/jstree"
                        }
                    },
                    "jqvmap": {
                        "src": {
                            "styles": [
                                "{$config.path.node_modules}/jqvmap/dist/jqvmap.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/jqvmap/dist/jquery.vmap.js",
                                "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.world.js",
                                "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.russia.js",
                                "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.usa.js",
                                "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.germany.js",
                                "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.europe.js"
                            ]
                        },
                        "bundle": {
                            "styles": "{$config.dist}/plugins/custom/jqvmap/jqvmap.bundle.css",
                            "scripts": "{$config.dist}/plugins/custom/jqvmap/jqvmap.bundle.js"
                        }
                    },
                    "uppy": {
                        "src": {
                            "styles": [
                                "{$config.path.node_modules}/uppy/dist/uppy.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/uppy/dist/uppy.min.js"
                            ]
                        },
                        "bundle": {
                            "styles": "{$config.dist}/plugins/custom/uppy/uppy.bundle.css",
                            "scripts": "{$config.dist}/plugins/custom/uppy/uppy.bundle.js"
                        }
                    },
                    "tinymce-js": {
                        "src": {
                            "scripts": [
                                "{$config.path.node_modules}/tinymce/tinymce.min.js",
                                "{$config.path.node_modules}/tinymce/themes/silver/theme.js",
                                "{$config.path.node_modules}/tinymce/themes/mobile/theme.js"
                            ]
                        },
                        "bundle": {
                            "scripts": "{$config.dist}/plugins/custom/tinymce/tinymce.bundle.js"
                        }
                    },
                    "tinymce": {
                        "src": {
                            "styles": [
                                "{$config.path.node_modules}/tinymce/skins/**/*.css"
                            ]
                        },
                        "output": {
                            "styles": "{$config.dist}/plugins/custom/tinymce/skins"
                        }
                    },
                    "tinymce-plugins": {
                        "src": {
                            "scripts": [
                                "{$config.path.node_modules}/tinymce/plugins/**/*.js"
                            ]
                        },
                        "output": {
                            "scripts": "{$config.dist}/plugins/custom/tinymce/plugins"
                        }
                    },
                    "tinymce-icons": {
                        "src": {
                            "scripts": [
                                "{$config.path.node_modules}/tinymce/icons/**"
                            ]
                        },
                        "output": {
                            "scripts": "{$config.dist}/plugins/custom/tinymce/icons"
                        }
                    },
                    "ckeditor-classic": {
                        "src": {
                            "scripts": [
                                "{$config.path.node_modules}/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"
                            ]
                        },
                        "bundle": {
                            "scripts": "{$config.dist}/plugins/custom/ckeditor/ckeditor-classic.bundle.js"
                        }
                    },
                    "ckeditor-inline": {
                        "src": {
                            "scripts": [
                                "{$config.path.node_modules}/@ckeditor/ckeditor5-build-inline/build/ckeditor.js"
                            ]
                        },
                        "bundle": {
                            "scripts": "{$config.dist}/plugins/custom/ckeditor/ckeditor-inline.bundle.js"
                        }
                    },
                    "ckeditor-balloon": {
                        "src": {
                            "scripts": [
                                "{$config.path.node_modules}/@ckeditor/ckeditor5-build-balloon/build/ckeditor.js"
                            ]
                        },
                        "bundle": {
                            "scripts": "{$config.dist}/plugins/custom/ckeditor/ckeditor-balloon.bundle.js"
                        }
                    },
                    "ckeditor-balloon-block": {
                        "src": {
                            "scripts": [
                                "{$config.path.node_modules}/@ckeditor/ckeditor5-build-balloon-block/build/ckeditor.js"
                            ]
                        },
                        "bundle": {
                            "scripts": "{$config.dist}/plugins/custom/ckeditor/ckeditor-balloon-block.bundle.js"
                        }
                    },
                    "ckeditor-decoupled-document": {
                        "src": {
                            "scripts": [
                                "{$config.path.node_modules}/@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor.js"
                            ]
                        },
                        "bundle": {
                            "scripts": "{$config.dist}/plugins/custom/ckeditor/ckeditor-document.bundle.js"
                        }
                    },
                    "jkanban": {
                        "src": {
                            "styles": [
                                "{$config.path.node_modules}/jkanban/dist/jkanban.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/jkanban/dist/jkanban.min.js"
                            ]
                        },
                        "bundle": {
                            "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"
                            ]
                        },
                        "bundle": {
                            "styles": "{$config.dist}/plugins/custom/leaflet/leaflet.bundle.css",
                            "scripts": "{$config.dist}/plugins/custom/leaflet/leaflet.bundle.js"
                        }
                    },
                    "cropperjs": {
                        "src": {
                            "styles": [
                                "{$config.path.node_modules}/cropperjs/dist/cropper.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/cropperjs/dist/cropper.js"
                            ]
                        },
                        "bundle": {
                            "styles": "{$config.dist}/plugins/custom/cropper/cropper.bundle.css",
                            "scripts": "{$config.dist}/plugins/custom/cropper/cropper.bundle.js"
                        }
                    }
                }
            },
            "pages": {
                "src": {
                    "styles": [
                        "{$config.path.src}/sass/pages/**/*.scss"
                    ],
                    "scripts": [
                        "{$config.path.src}/js/pages/**/*.js"
                    ]
                },
                "output": {
                    "styles": "{$config.dist}/css/pages/",
                    "scripts": "{$config.dist}/js/pages/"
                }
            },
            "theme": {
                "src": {
                    "styles": [
                        "{$config.path.src}/sass/themes/**/*.scss"
                    ]
                },
                "output": {
                    "styles": "{$config.dist}/css/themes/"
                }
            },
            "media": {
                "src": {
                    "media": [
                        "{$config.path.src}/media/**/*.*"
                    ]
                },
                "output": {
                    "media": "{$config.dist}/media/"
                }
            }
        }
    }

#### Required Core CSS and JS files

Vendors list under `build.plugins.base.src.mandatory` is required, and the `build.plugins.base.src.optional` is optional. Also JS & CSS files in `build.theme.base` is required for specific demo styles and scripts.

Build Config
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.vendors.main` | `object` | This object specifies required 3rd party resources to be added into the base css and js vendors bundles.
`build.vendors.base` | `object` | This object specifies global 3rd party resources to be added into the base css and js vendors bundles.
`build.vendors.custom` | `object` | This object specifies 3rd party resources.
`build.theme.base` | `object` | This object specifies the global assets of the demo to be added into the base css and js demo bundles.
`build.theme.skins` | `object` | This object specifies skins assets.
`build.theme.pages` | `object` | This object specifies custom assets that are included on demand.
`build.media` | `object` | Media folder.

### Build Tasks

Update the `Node.js`, global `npm` and `yarn` to the latest version, if you got the error related to the `node-sass`.

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/html/tools/

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

    yarn

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

    gulp --demo1

If `gulp` command is not working, try to remove `[metronic]/theme/html/tools/node_modules` folder, and reinstall dependencies using `yarn`.

Provide parameter `--rtl=true` to gulp task. This command disable from generating RTL CSS. If this param does not exist, by default RTL generate will be enabled.

    gulp --rtl=true --demo1

Provide parameter `--js` to gulp task. This command will generate javascript assets only.

    gulp --js --demo1

Provide parameter `--sass` to gulp task. This command will generate SCSS, SASS and CSS assets only.

    gulp --sass --demo1

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

    gulp --media --demo1

Provide parameter `--prod` to gulp task. This command will minify all the JS and CSS.

    gulp --prod --demo1

The customization should be done from `[metronic]/theme/html/[demo]/src/`. After compilation refer to the destination folder `[metronic]/theme/html/dist/`.

This command use to start the real-time watcher. This task watches the sass/js files and automatically recompile whenever the source files are changed.

To run watcher for all JS and SCSS files. Run command below.

    gulp watch --demo1

You also can run watcher separately for JS and SCSS.

    gulp watch:js --demo1

    gulp watch:scss --demo1

### Localhost

`Gulp-connect` plugin use to run a simple webserver to run the HTML files.

Note that server side ajax examples are not supported using this webserver and for full functionality, please refer to online preview: `https://keenthemes.com/metronic/preview` For the server side scripts demos, refer to the `[metronic]/docs/api_reference` in the docs folder.

Open a `console` and run below command.

    gulp localhost --demo1

Keep the console open. Open this link to run `http://localhost:8080/`

The default running port is `8080`. In case, this port being used by other application, it can be changed in `[metronic]/theme/html/tools/gulp/watch.js`

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