logo The World’s #1 Bootstrap 4 HTML, Angular 9, React, VueJS & Laravel
Admin Dashboard Theme

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.0",
  "config": {
    "debug": false,
    "compile": {
      "rtl": {
        "enabled": false,
        "skip": [
          "select2",
          "socicon",
          "line-awesome",
          "flaticon",
          "flaticon2",
          "fontawesome5",
          "jstree",
          "owl.carousel",
          "fullcalendar",
          "bootstrap-datepicker",
          "bootstrap-datetime-picker",
          "bootstrap-switch",
          "nouislider",
          "tinymce",
          "sweetalert2"
        ]
      },
      "jsUglify": false,
      "cssMinify": false,
      "jsSourcemaps": false,
      "cssSourcemaps": false
    },
    "path": {
      "src": "./../{demo}/src",
      "node_modules": "./node_modules",
      "demo_api_url": "https://keenthemes.com/metronic/tools/preview/"
    },
    "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"
              ]
            },
            "js-cookie": {
              "scripts": [
                "{$config.path.node_modules}/js-cookie/src/js.cookie.js"
              ]
            },
            "moment": {
              "scripts": [
                "{$config.path.node_modules}/moment/min/moment.min.js"
              ]
            },
            "tooltip.js": {
              "scripts": [
                "{$config.path.node_modules}/tooltip.js/dist/umd/tooltip.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": {
            "jquery-form": {
              "scripts": [
                "{$config.path.node_modules}/jquery-form/dist/jquery.form.min.js"
              ]
            },
            "tether": {
              "styles": [
                "{$config.path.node_modules}/tether/dist/css/tether.css"
              ],
              "scripts": []
            },
            "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"
              ]
            },
            "bootstrap-datetime-picker": {
              "styles": [
                "{$config.path.node_modules}/bootstrap-datetime-picker/css/bootstrap-datetimepicker.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.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"
              ]
            },
            "owl.carousel": {
              "styles": [
                "{$config.path.node_modules}/owl.carousel/dist/assets/owl.carousel.css",
                "{$config.path.node_modules}/owl.carousel/dist/assets/owl.theme.default.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/owl.carousel/dist/owl.carousel.js"
              ],
              "images": [
                "{$config.path.node_modules}/owl.carousel/dist/assets/owl.video.play.png",
                "{$config.path.node_modules}/owl.carousel/dist/assets/ajax-loader.gif"
              ]
            },
            "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.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/summernote/dist/summernote.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"
              ]
            },
            "jquery-validation": {
              "scripts": [
                "{$config.path.node_modules}/jquery-validation/dist/jquery.validate.js",
                "{$config.path.node_modules}/jquery-validation/dist/additional-methods.js",
                "{$config.path.src}/js/vendors/plugins/jquery-validation.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.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"
              ]
            },
            "sticky-js": {
              "scripts": [
                "{$config.path.node_modules}/sticky-js/dist/sticky.min.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"
          }
        },
        "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"
          }
        }
      }
    },
    "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.demo string Name of current demo ID.
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.jsUglify 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.path object Predefined paths the where src/, node_modules/ and [metronic]/theme/html/[demo]/src/ are located. demo_api_url is the ajax API path used by datatables, dropdowns with live search and other json server side data source related demos.
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.plugins.base object This object specifies global 3rd party resources to be added into the base css and js vendors bundles.
build.plugins.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=false --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 distination 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,
});