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 default.json build config files allows you manage the entire assest bundling for production by taking advantage of yarn
package manager.
The build config file is located at[root]/theme/default/tools/build.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",
"version": "6.0.2",
"config": {
"demo": "",
"debug": false,
"compile": {
"rtl": {
"enabled": true,
"skip": [
"select2",
"socicon",
"line-awesome",
"flaticon",
"flaticon2",
"fontawesome5",
"jstree",
"owl.carousel",
"fullcalendar",
"bootstrap-datepicker",
"bootstrap-datetime-picker",
"bootstrap-switch",
"nouislider"
]
},
"jsUglify": false,
"cssMinify": false,
"jsSourcemaps": false,
"cssSourcemaps": false
},
"path": {
"src": "./../themes/themes/metronic/src",
"node_modules": "./../themes/themes/metronic/dist/preview/node_modules",
"demo_api_url": "https://keenthemes.com/metronic/themes/themes/metronic/dist/preview/"
},
"dist": [
"./../dist/**/assets"
]
},
"build": {
"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"
]
},
"sticky-js": {
"scripts": [
"{$config.path.node_modules}/sticky-js/dist/sticky.min.js"
]
},
"wnumb": {
"scripts": [
"{$config.path.node_modules}/wnumb/wNumb.js"
]
}
},
"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/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/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}/vendors/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}/components/vendors/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"
]
},
"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/bootstrap-markdown.init.js"
]
},
"remarkable-bootstrap-notify": {
"scripts": [
"{$config.path.node_modules}/bootstrap-notify/bootstrap-notify.min.js",
"{$config.path.src}/components/vendors/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/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"
]
},
"morris.js": {
"styles": [
"{$config.path.node_modules}/morris.js/morris.css"
],
"scripts": [
"{$config.path.node_modules}/raphael/raphael.js",
"{$config.path.node_modules}/morris.js/morris.js"
]
},
"chart.js": {
"scripts": [
"{$config.path.node_modules}/chart.js/dist/Chart.bundle.js"
]
},
"bootstrap-session-timeout": {
"scripts": [
"{$config.path.src}/vendors/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js"
]
},
"jquery-idletimer": {
"scripts": [
"{$config.path.src}/vendors/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/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"
]
},
"socicon": {
"styles": [
"{$config.path.node_modules}/socicon/css/socicon.css"
],
"fonts": [
"{$config.path.node_modules}/socicon/font/**"
]
},
"dompurify": {
"scripts": [
"{$config.path.node_modules}/dompurify/dist/purify.js"
]
},
"line-awesome": {
"styles": [
"{$config.path.src}/vendors/line-awesome/css/line-awesome.css"
],
"fonts": [
"{$config.path.src}/vendors/line-awesome/fonts/**"
]
},
"flaticon": {
"styles": [
"{$config.path.src}/vendors/flaticon/flaticon.css"
],
"fonts": [
"{$config.path.src}/vendors/flaticon/font/**"
]
},
"flaticon2": {
"styles": [
"{$config.path.src}/vendors/flaticon2/flaticon.css"
],
"fonts": [
"{$config.path.src}/vendors/flaticon2/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.output}/vendors/global/vendors.bundle.css",
"scripts": "{$config.output}/vendors/global/vendors.bundle.js",
"images": "{$config.output}/vendors/global/img",
"fonts": "{$config.output}/vendors/global/fonts"
}
},
"custom": {
"jquery-ui": {
"src": {
"styles": [
"{$config.path.src}/vendors/jquery-ui/jquery-ui.min.css"
],
"scripts": [
"{$config.path.src}/vendors/jquery-ui/jquery-ui.min.js"
],
"images": [
"{$config.path.src}/vendors/jquery-ui/images/*"
]
},
"bundle": {
"styles": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.css",
"scripts": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.js",
"images": "{$config.output}/vendors/custom/jquery-ui/images"
}
},
"fullcalendar": {
"src": {
"styles": [
"{$config.path.node_modules}/fullcalendar/dist/fullcalendar.css"
],
"scripts": [
"{$config.path.node_modules}/fullcalendar/dist/fullcalendar.js",
"{$config.path.node_modules}/fullcalendar/dist/gcal.js"
]
},
"bundle": {
"styles": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.css",
"scripts": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.js"
}
},
"gmaps": {
"src": {
"scripts": [
"{$config.path.node_modules}/gmaps/gmaps.js"
]
},
"bundle": {
"scripts": "{$config.output}/vendors/custom/gmaps/gmaps.js"
}
},
"jquery-flot": {
"src": {
"scripts": [
"{$config.path.node_modules}/jquery-flot/jquery.flot.js",
"{$config.path.node_modules}/jquery-flot/jquery.flot.resize.js",
"{$config.path.node_modules}/jquery-flot/jquery.flot.categories.js",
"{$config.path.node_modules}/jquery-flot/jquery.flot.pie.js",
"{$config.path.node_modules}/jquery-flot/jquery.flot.stack.js",
"{$config.path.node_modules}/jquery-flot/jquery.flot.crosshair.js",
"{$config.path.node_modules}/jquery-flot/jquery.flot.axislabels.js"
]
},
"bundle": {
"scripts": "{$config.output}/vendors/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/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.output}/vendors/custom/datatables/datatables.bundle.css",
"scripts": "{$config.output}/vendors/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/vendors/jstree/32px.png",
"{$config.path.node_modules}/jstree/dist/themes/default/40px.png",
"{$config.path.node_modules}/jstree/dist/themes/default/*.gif"
]
},
"bundle": {
"styles": "{$config.output}/vendors/custom/jstree/jstree.bundle.css",
"scripts": "{$config.output}/vendors/custom/jstree/jstree.bundle.js",
"images": "{$config.output}/vendors/custom/jstree/images"
}
},
"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.output}/vendors/custom/jqvmap/jqvmap.bundle.css",
"scripts": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.js"
}
}
}
},
"demos": {
"demo1": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo1/style.scss"
],
"scripts": [
"{$config.path.src}/js/theme/core/*.js",
"{$config.path.src}/js/theme/core/base/**/*.js",
"{$config.path.src}/js/theme/core/**/*.js",
"{$config.path.src}/js/theme/demos/demo1/**/*.js"
]
},
"bundle": {
"styles": "{$config.output}/css/demo1/style.bundle.css",
"scripts": "{$config.output}/js/demo1/scripts.bundle.js"
}
},
"skins": {
"header": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo1/header/skins/**/*.scss"
]
},
"output": {
"styles": "{$config.output}/css/demo1/skins/header/"
}
},
"brand": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo1/brand/skins/**/*.scss"
]
},
"output": {
"styles": "{$config.output}/css/demo1/skins/brand/"
}
},
"aside": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo1/aside/skins/**/*.scss"
]
},
"output": {
"styles": "{$config.output}/css/demo1/skins/aside/"
}
}
},
"pages": {
"src": {
"styles-by-demo": [
"{$config.path.src}/sass/theme/pages/**/*.scss"
],
"scripts": [
"{$config.path.src}/js/theme/pages/**/*.js"
]
},
"output": {
"styles-by-demo": "{$config.output}/css/demo1/pages/",
"scripts": "{$config.output}/js/demo1/pages/"
}
}
},
"demo2": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo2/style.scss"
],
"scripts": [
"{$config.path.src}/js/theme/core/*.js",
"{$config.path.src}/js/theme/core/base/**/*.js",
"{$config.path.src}/js/theme/core/**/*.js",
"{$config.path.src}/js/theme/demos/demo2/**/*.js"
]
},
"bundle": {
"styles": "{$config.output}/css/demo2/style.bundle.css",
"scripts": "{$config.output}/js/demo2/scripts.bundle.js"
}
},
"pages": {
"src": {
"styles-by-demo": [
"{$config.path.src}/sass/theme/pages/**/*.scss"
],
"scripts": [
"{$config.path.src}/js/theme/pages/**/*.js"
]
},
"output": {
"styles-by-demo": "{$config.output}/css/demo2/pages/",
"scripts": "{$config.output}/js/demo2/pages/"
}
}
},
"demo3": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo3/style.scss"
],
"scripts": [
"{$config.path.src}/js/theme/core/*.js",
"{$config.path.src}/js/theme/core/base/**/*.js",
"{$config.path.src}/js/theme/core/**/*.js",
"{$config.path.src}/js/theme/demos/demo3/**/*.js"
]
},
"bundle": {
"styles": "{$config.output}/css/demo3/style.bundle.css",
"scripts": "{$config.output}/js/demo3/scripts.bundle.js"
}
},
"pages": {
"src": {
"styles-by-demo": [
"{$config.path.src}/sass/theme/pages/**/*.scss"
],
"scripts": [
"{$config.path.src}/js/theme/pages/**/*.js"
]
},
"output": {
"styles-by-demo": "{$config.output}/css/demo3/pages/",
"scripts": "{$config.output}/js/demo3/pages/"
}
}
},
"demo4": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo4/style.scss"
],
"scripts": [
"{$config.path.src}/js/theme/core/*.js",
"{$config.path.src}/js/theme/core/base/**/*.js",
"{$config.path.src}/js/theme/core/**/*.js",
"{$config.path.src}/js/theme/demos/demo4/**/*.js"
]
},
"bundle": {
"styles": "{$config.output}/css/demo4/style.bundle.css",
"scripts": "{$config.output}/js/demo4/scripts.bundle.js"
}
},
"pages": {
"src": {
"styles-by-demo": [
"{$config.path.src}/sass/theme/pages/**/*.scss"
],
"scripts": [
"{$config.path.src}/js/theme/pages/**/*.js"
]
},
"output": {
"styles-by-demo": "{$config.output}/css/demo4/pages/",
"scripts": "{$config.output}/js/demo4/pages/"
}
}
},
"demo5": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo5/style.scss"
],
"scripts": [
"{$config.path.src}/js/theme/core/*.js",
"{$config.path.src}/js/theme/core/base/**/*.js",
"{$config.path.src}/js/theme/core/**/*.js",
"{$config.path.src}/js/theme/demos/demo5/**/*.js"
]
},
"bundle": {
"styles": "{$config.css}/css/demo5/style.bundle.css",
"scripts": "{$config.js}/js/demo5/scripts.bundle.js"
}
},
"pages": {
"src": {
"styles-by-demo": [
"{$config.path.src}/sass/theme/pages/**/*.scss"
],
"scripts": [
"{$config.path.src}/js/theme/pages/**/*.js"
]
},
"output": {
"styles-by-demo": "{$config.output}/css/demo5/pages/",
"scripts": "{$config.output}/js/demo5/pages/"
}
}
},
"demo6": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo6/style.scss"
],
"scripts": [
"{$config.path.src}/js/theme/core/*.js",
"{$config.path.src}/js/theme/core/base/**/*.js",
"{$config.path.src}/js/theme/core/**/*.js",
"{$config.path.src}/js/theme/demos/demo6/**/*.js"
]
},
"bundle": {
"styles": "{$config.css}/css/demo6/style.bundle.css",
"scripts": "{$config.js}/js/demo6/scripts.bundle.js"
}
},
"pages": {
"src": {
"styles-by-demo": [
"{$config.path.src}/sass/theme/pages/**/*.scss"
],
"scripts": [
"{$config.path.src}/js/theme/pages/**/*.js"
]
},
"output": {
"styles-by-demo": "{$config.output}/css/demo6/pages/",
"scripts": "{$config.output}/js/demo6/pages/"
}
}
},
"demo7": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo7/style.scss"
],
"scripts": [
"{$config.path.src}/js/theme/core/*.js",
"{$config.path.src}/js/theme/core/base/**/*.js",
"{$config.path.src}/js/theme/core/**/*.js",
"{$config.path.src}/js/theme/demos/demo7/**/*.js"
]
},
"bundle": {
"styles": "{$config.css}/css/demo7/style.bundle.css",
"scripts": "{$config.js}/js/demo7/scripts.bundle.js"
}
},
"pages": {
"src": {
"styles-by-demo": [
"{$config.path.src}/sass/theme/pages/**/*.scss"
],
"scripts": [
"{$config.path.src}/js/theme/pages/**/*.js"
]
},
"output": {
"styles-by-demo": "{$config.output}/css/demo7/pages/",
"scripts": "{$config.output}/js/demo7/pages/"
}
}
},
"demo8": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo8/style.scss"
],
"scripts": [
"{$config.path.src}/js/theme/core/*.js",
"{$config.path.src}/js/theme/core/base/**/*.js",
"{$config.path.src}/js/theme/core/**/*.js",
"{$config.path.src}/js/theme/demos/demo8/**/*.js"
]
},
"bundle": {
"styles": "{$config.css}/css/demo8/style.bundle.css",
"scripts": "{$config.js}/js/demo8/scripts.bundle.js"
}
},
"pages": {
"src": {
"styles-by-demo": [
"{$config.path.src}/sass/theme/pages/**/*.scss"
],
"scripts": [
"{$config.path.src}/js/theme/pages/**/*.js"
]
},
"output": {
"styles-by-demo": "{$config.output}/css/demo8/pages/",
"scripts": "{$config.output}/js/demo8/pages/"
}
}
},
"demo9": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo9/style.scss"
],
"scripts": [
"{$config.path.src}/js/theme/core/*.js",
"{$config.path.src}/js/theme/core/base/**/*.js",
"{$config.path.src}/js/theme/core/**/*.js",
"{$config.path.src}/js/theme/demos/demo9/**/*.js"
]
},
"bundle": {
"styles": "{$config.css}/css/demo9/style.bundle.css",
"scripts": "{$config.js}/js/demo9/scripts.bundle.js"
}
},
"pages": {
"src": {
"styles-by-demo": [
"{$config.path.src}/sass/theme/pages/**/*.scss"
],
"scripts": [
"{$config.path.src}/js/theme/pages/**/*.js"
]
},
"output": {
"styles-by-demo": "{$config.output}/css/demo9/pages/",
"scripts": "{$config.output}/js/demo9/pages/"
}
}
},
"demo10": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo10/style.scss"
],
"scripts": [
"{$config.path.src}/js/theme/core/*.js",
"{$config.path.src}/js/theme/core/base/**/*.js",
"{$config.path.src}/js/theme/core/**/*.js",
"{$config.path.src}/js/theme/demos/demo10/**/*.js"
]
},
"bundle": {
"styles": "{$config.css}/css/demo10/style.bundle.css",
"scripts": "{$config.js}/js/demo10/scripts.bundle.js"
}
},
"pages": {
"src": {
"styles-by-demo": [
"{$config.path.src}/sass/theme/pages/**/*.scss"
],
"scripts": [
"{$config.path.src}/js/theme/pages/**/*.js"
]
},
"output": {
"styles-by-demo": "{$config.output}/css/demo10/pages/",
"scripts": "{$config.output}/js/demo10/pages/"
}
}
},
"demo11": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo11/style.scss"
],
"scripts": [
"{$config.path.src}/js/theme/core/*.js",
"{$config.path.src}/js/theme/core/base/**/*.js",
"{$config.path.src}/js/theme/core/**/*.js",
"{$config.path.src}/js/theme/demos/demo11/**/*.js"
]
},
"bundle": {
"styles": "{$config.css}/css/demo11/style.bundle.css",
"scripts": "{$config.js}/js/demo11/scripts.bundle.js"
}
},
"pages": {
"src": {
"styles-by-demo": [
"{$config.path.src}/sass/theme/pages/**/*.scss"
],
"scripts": [
"{$config.path.src}/js/theme/pages/**/*.js"
]
},
"output": {
"styles-by-demo": "{$config.output}/css/demo11/pages/",
"scripts": "{$config.output}/js/demo11/pages/"
}
}
},
"demo12": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/theme/demos/demo12/style.scss"
],
"scripts": [
"{$config.path.src}/js/theme/core/*.js",
"{$config.path.src}/js/theme/core/base/**/*.js",
"{$config.path.src}/js/theme/core/**/*.js",
"{$config.path.src}/js/theme/demos/demo12/**/*.js"
]
},
"bundle": {
"styles": "{$config.css}/css/demo12/style.bundle.css",
"scripts": "{$config.js}/js/demo12/scripts.bundle.js"
}
},
"pages": {
"src": {
"styles-by-demo": [
"{$config.path.src}/sass/theme/pages/**/*.scss"
],
"scripts": [
"{$config.path.src}/js/theme/pages/**/*.js"
]
},
"output": {
"styles-by-demo": "{$config.output}/css/demo12/pages/",
"scripts": "{$config.output}/js/demo12/pages/"
}
}
}
},
"media": {
"src": {
"media": [
"{$config.path.src}/media/**/*.*"
]
},
"output": {
"media": "{$config.output}/media/"
}
}
}
}Vendors list under build.vendors.base.src.mandatory is required, and the
build.vendors.base.src.optional is optional. Also JS & CSS files in
build.demo.[demo_id]* is required for specific demo styles and scripts.
*[demo_id] is the unique demo name, like default, demo2, demo3, etc.
| Build Config | ||
|---|---|---|
| Field | Type | Description |
config.demo |
string |
Specify an ID of the selected demo for gulp tool to build assets only for selected demo |
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
[root]/theme/default/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.vendors |
object |
vendors object specifies all 3rd party resources for production usage
|
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.demo.demoId |
object |
The assets for specific demo. |
build.demo.demoId.base |
object |
This object specifies the global assets of the demo to be added into the base css and js demo bundles. |
build.demo.demoId.pages |
object |
This object specifies custom assets that are included on demand. |
build.media |
object |
Media folder. |
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 [root]/theme/default/tools/
For the first time launch, run the command below to install the npm dependencies defined in
[root]/theme/default/tools/package.json (if you haven't done it) :
yarn
After every modification in [root]/theme/default/src/, run below task to compile the assets as defined in
[root]/theme/default/tools/build.json :
gulp buildIf gulp command is not working, try to remove
[root]/theme/default/tools/node_modules folder, and reinstall dependencies using yarn.
The command gulp apiurl is an optional gulp task for demo purpose. It does set all the demo backend URL to point to demo API server.
For example in the source code, some demo is set as relative URL. By using this command, all the demo URL will be converted to absolute URL.
The demo URL is set in the [root]/theme/default/tools/package.json file in config.path.demo_api_url.
gulp apiurlProvide parameter --rtl to gulp task. This command disable from generating RTL CSS. If this param does not exist, by default RTL generate will be
enabled.
gulp build --rtl=falseProvide parameter --demo to gulp task. This command will generate assets based on the selected demo only.
gulp build --demo=demo2gulp build --demo=demo2,demo5,demo7Provide parameter --js to gulp task. This command will generate javascript assets only.
gulp build --jsProvide parameter --sass to gulp task. This command will generate SCSS, SASS and CSS assets only.
gulp build --sassProvide parameter --media to gulp task. This command will generate all media, fonts, images, etc. assets only.
gulp build --mediaProvide parameter --prod to gulp task. This command will minify all the JS and CSS.
gulp --prodBase theme CSS & JS in [root]/theme/default/src/assets/. When you run gulp build, all CSS & JS from [root]/theme/default/src/assets/ will be compiled and place
in several demo locations dist. HTML files from [root]/theme/default/src/ will be copied into dist folder.
The compile output folder is defined in [root]/theme/default/tools/build.json file, under config.dist.
You can create another compile output path.
"dist": [
"./../dist/**/assets"
]Gulp can run automatically when a file changed. Watch tasks file is located in [root]/theme/default/tools/gulp/watch.js.
To run watcher for all JS and SCSS files. Run command below.
gulp watchYou also can run watcher separately for JS and SCSS.
gulp watch:jsgulp watch:scssGulp-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 [root]/docs/api_reference in the docs folder.
Open a console and run below command.
gulp localhostKeep the console open. Open this link to run http://localhost:8080/default/
I run a team of 20 product managers, developers, QA and UX resources. Previously we designed everything ourselves. For our newest platform we tried out Metronic. I cannot overestimate the impact Metronic has had. It's accelerated development 3x and reduced QA issues by 50%. If you add up the reduced need for design time/resources, the increase in dev speed and the reduction in QA, it's probably saved us $100,000 on this project alone, and I plan to use it for all platforms moving forward.
The flexibility of the design has also allowed us to put out a better looking & working platform and reduced my headaches by 90%. Thank you KeenThemes!
Everything within Metronic is customizable globally to provide limitless unique styled projects
Choose a perfect design for your next project among hundreds of demos
A huge collection of components to power your application with the latest UI/UX trands
Enterprise ready Angular 7 integration with built-in authentication module and many more
Metronic deeply customizes Bootstrap with native look and feel
Our super sleek and intuitive Datatable comes packed with all advanced CRUD features
Metronic is the only theme trusted by over 70,000 developers world wide
Lifetime updates with new demos and features is guaranteed
Metronic is written with a code structure that all developers will be able to pick up easily and fall in love