The build config file is located at
[root]/tools/conf/[version_package].json and you can fully customize the build settings to meet your project requirements:
Please make sure the dist output path config.dist is set to true in
default.json and
angular.json, for the build tools to output the compilation.
{
"config": {
"demo": "",
"debug": false,
"compile": {
"jsUglify": false,
"cssMinify": false,
"jsSourcemaps": false,
"cssSourcemaps": false
},
"path": {
"src": "./../theme/[root]/src",
"node_modules": "./node_modules",
"demo_api_url": "https://keenthemes.com/metronic/preview/"
},
"dist": [
"./../theme/dist/preview/assets",
"./../theme/dist/default/**/assets"
]
},
"build": {
"vendors": {
"base": {
"src": {
"mandatory": {
"jquery": {
"scripts": [
"{$config.path.node_modules}/jquery/dist/jquery.js"
]
},
"bootstrap": {
"scripts": [
"{$config.path.node_modules}/popper.js/dist/umd/popper.js",
"{$config.path.node_modules}/bootstrap/dist/js/bootstrap.min.js"
]
},
"js-cookie": {
"scripts": [
"{$config.path.node_modules}/js-cookie/src/js.cookie.js"
]
},
"jquery-smooth-scroll": {
"scripts": [
"{$config.path.node_modules}/jquery-smooth-scroll/jquery.smooth-scroll.js"
]
},
"moment": {
"scripts": [
"{$config.path.node_modules}/moment/min/moment.min.js"
]
},
"wNumb": {
"scripts": [
"{$config.path.node_modules}/wnumb/wNumb.js"
]
}
},
"optional": {
"jquery.repeater": {
"scripts": [
"{$config.path.node_modules}/jquery.repeater/src/intro.js",
"{$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",
"{$config.path.node_modules}/jquery.repeater/src/outro.js"
]
},
"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": []
},
"malihu-custom-scrollbar-plugin": {
"styles": [
"{$config.path.node_modules}/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"
],
"scripts": [
"{$config.path.node_modules}/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"
],
"images": [
"{$config.path.node_modules}/malihu-custom-scrollbar-plugin/mCSB_buttons.png"
]
},
"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.min.css"
],
"scripts": [
"{$config.path.node_modules}/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
]
},
"bootstrap-datetime-picker": {
"styles": [
"{$config.path.node_modules}/bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.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.min.css"
],
"scripts": [
"{$config.path.node_modules}/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
"{$config.path.src}/js/framework/components/plugins/forms/bootstrap-timepicker.init.js"
]
},
"bootstrap-daterangepicker": {
"styles": [
"{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css"
],
"scripts": [
"{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js",
"{$config.path.src}/js/framework/components/plugins/forms/bootstrap-daterangepicker.init.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-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/framework/components/plugins/forms/bootstrap-switch.init.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"
]
},
"select2": {
"styles": [
"{$config.path.node_modules}/select2/dist/css/select2.css"
],
"scripts": [
"{$config.path.node_modules}/select2/dist/js/select2.js"
]
},
"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",
"{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.phone.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"
]
},
"ion-rangeslider": {
"styles": [
"{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.css",
"{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.skinFlat.css"
],
"scripts": [
"{$config.path.node_modules}/ion-rangeslider/js/ion.rangeSlider.js"
],
"images": [
"{$config.path.node_modules}/ion-rangeslider/img/sprite-skin-flat.png"
]
},
"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}/bootstrap-markdown/js/bootstrap-markdown.js",
"{$config.path.src}/js/framework/components/plugins/forms/bootstrap-markdown.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/framework/components/plugins/forms/jquery-validation.init.js"
]
},
"remarkable-bootstrap-notify": {
"scripts": [
"{$config.path.node_modules}/bootstrap-notify/bootstrap-notify.min.js",
"{$config.path.src}/js/framework/components/plugins/base/bootstrap-notify.init.js"
]
},
"animate.css": {
"styles": [
"{$config.path.node_modules}/animate.css/animate.min.css"
]
},
"toastr": {
"styles": [
"{$config.path.node_modules}/toastr/build/toastr.css"
],
"scripts": [
"{$config.path.node_modules}/toastr/build/toastr.min.js"
]
},
"jstree": {
"styles": [
"{$config.path.node_modules}/jstree/dist/themes/default/style.css"
],
"scripts": [
"{$config.path.node_modules}/jstree/dist/jstree.js"
],
"images": [
"{$config.path.src}/vendors/jstree/32px.png",
"{$config.path.node_modules}/jstree/dist/themes/default/40px.png",
"{$config.path.node_modules}/jstree/dist/themes/default/*.gif"
]
},
"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"
]
},
"chartist": {
"styles": [
"{$config.path.node_modules}/chartist/dist/chartist.css"
],
"scripts": [
"{$config.path.node_modules}/chartist/dist/chartist.js"
]
},
"chart.js": {
"scripts": [
"{$config.path.node_modules}/chart.js/dist/Chart.bundle.js",
"{$config.path.src}/js/framework/components/plugins/charts/chart.init.js"
]
},
"bootstrap-session-timeout": {
"scripts": [
"{$config.path.src}/vendors/bootstrap-session-timeout/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"
]
},
"socicon": {
"styles": [
"{$config.path.node_modules}/socicon/css/socicon.css"
],
"fonts": [
"{$config.path.node_modules}/socicon/font/**"
]
},
"font-awesome": {
"styles": [
"{$config.path.node_modules}/font-awesome/css/font-awesome.css"
],
"fonts": [
"{$config.path.node_modules}/font-awesome/fonts/**"
]
},
"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/css/flaticon.css"
],
"fonts": [
"{$config.path.src}/vendors/flaticon/fonts/**"
]
},
"metronic": {
"styles": [
"{$config.path.src}/vendors/metronic/css/styles.css"
],
"fonts": [
"{$config.path.src}/vendors/metronic/fonts/**"
]
}
}
},
"bundle": {
"styles": "{$config.output}/vendors/base/vendors.bundle.css",
"scripts": "{$config.output}/vendors/base/vendors.bundle.js",
"images": "{$config.output}/vendors/base/images",
"fonts": "{$config.output}/vendors/base/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"
]
},
"bundle": {
"styles": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.css",
"scripts": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.js"
}
},
"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"
}
},
"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.europe.js",
"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.germany.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.world.js"
]
},
"bundle": {
"styles": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.css",
"scripts": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.js"
}
},
"flot": {
"src": {
"scripts": [
"{$config.path.node_modules}/Flot/jquery.flot.js",
"{$config.path.node_modules}/Flot/jquery.flot.resize.js",
"{$config.path.node_modules}/Flot/jquery.flot.categories.js",
"{$config.path.node_modules}/Flot/jquery.flot.pie.js",
"{$config.path.node_modules}/Flot/jquery.flot.stack.js",
"{$config.path.node_modules}/Flot/jquery.flot.crosshair.js",
"{$config.path.node_modules}/Flot/jquery.flot.axislabels.js"
]
},
"bundle": {
"scripts": "{$config.output}/vendors/custom/flot/flot.bundle.js"
}
}
}
},
"demo": {
"default": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/demo/default/style.scss"
],
"scripts": [
"{$config.path.src}/js/framework/**/*.js",
"{$config.path.src}/js/demo/default/base/**/*.js",
"{$config.path.src}/js/app/base/**/*.js",
"{$config.path.src}/js/snippets/base/**/*.js"
]
},
"bundle": {
"styles": "{$config.output}/demo/default/base/style.bundle.css",
"scripts": "{$config.output}/demo/default/base/scripts.bundle.js"
}
},
"custom": {
"src": {
"scripts": [
"{$config.path.src}/js/demo/default/custom/**/*.js"
],
"media": [
"{$config.path.src}/media/demo/default/**/*.*"
]
},
"output": {
"scripts": "{$config.output}/demo/default/custom/",
"media": "{$config.output}/demo/default/media/"
}
}
},
"demo2": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/demo/demo2/style.scss"
],
"scripts": [
"{$config.path.src}/js/framework/**/*.js",
"{$config.path.src}/js/demo/demo2/base/**/*.js",
"{$config.path.src}/js/app/base/**/*.js",
"{$config.path.src}/js/snippets/base/**/*.js"
]
},
"bundle": {
"styles": "{$config.output}/demo/demo2/base/style.bundle.css",
"scripts": "{$config.output}/demo/demo2/base/scripts.bundle.js"
}
},
"custom": {
"src": {
"scripts": [
"{$config.path.src}/js/demo/demo2/custom/**/*.js"
],
"media": [
"{$config.path.src}/media/demo/demo2/**/*.*"
]
},
"output": {
"scripts": "{$config.output}/demo/demo2/custom/",
"media": "{$config.output}/demo/demo2/media/"
}
}
},
"demo3": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/demo/demo3/style.scss"
],
"scripts": [
"{$config.path.src}/js/framework/**/*.js",
"{$config.path.src}/js/demo/demo3/base/**/*.js",
"{$config.path.src}/js/app/base/**/*.js",
"{$config.path.src}/js/snippets/base/**/*.js"
]
},
"bundle": {
"styles": "{$config.output}/demo/demo3/base/style.bundle.css",
"scripts": "{$config.output}/demo/demo3/base/scripts.bundle.js"
}
},
"custom": {
"src": {
"scripts": [
"{$config.path.src}/js/demo/demo3/custom/**/*.js"
],
"media": [
"{$config.path.src}/media/demo/demo3/**/*.*"
]
},
"output": {
"scripts": "{$config.output}/demo/demo3/custom/",
"media": "{$config.output}/demo/demo3/media/"
}
}
},
"demo4": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/demo/demo4/style.scss"
],
"scripts": [
"{$config.path.src}/js/framework/**/*.js",
"{$config.path.src}/js/demo/demo4/base/**/*.js",
"{$config.path.src}/js/app/base/**/*.js",
"{$config.path.src}/js/snippets/base/**/*.js"
]
},
"bundle": {
"styles": "{$config.output}/demo/demo4/base/style.bundle.css",
"scripts": "{$config.output}/demo/demo4/base/scripts.bundle.js"
}
},
"custom": {
"src": {
"scripts": [
"{$config.path.src}/js/demo/demo4/custom/**/*.js"
],
"media": [
"{$config.path.src}/media/demo/demo4/**/*.*"
]
},
"output": {
"scripts": "{$config.output}/demo/demo4/custom/",
"media": "{$config.output}/demo/demo4/media/"
}
}
},
"demo5": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/demo/demo5/style.scss"
],
"scripts": [
"{$config.path.src}/js/framework/**/*.js",
"{$config.path.src}/js/demo/demo5/base/**/*.js",
"{$config.path.src}/js/app/base/**/*.js",
"{$config.path.src}/js/snippets/base/**/*.js"
]
},
"bundle": {
"styles": "{$config.output}/demo/demo5/base/style.bundle.css",
"scripts": "{$config.output}/demo/demo5/base/scripts.bundle.js"
}
},
"custom": {
"src": {
"scripts": [
"{$config.path.src}/js/demo/demo5/custom/**/*.js"
],
"media": [
"{$config.path.src}/media/demo/demo5/**/*.*"
]
},
"output": {
"scripts": "{$config.output}/demo/demo5/custom/",
"media": "{$config.output}/demo/demo5/media/"
}
}
},
"demo6": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/demo/demo6/style.scss"
],
"scripts": [
"{$config.path.src}/js/framework/**/*.js",
"{$config.path.src}/js/demo/demo6/base/**/*.js",
"{$config.path.src}/js/app/base/**/*.js",
"{$config.path.src}/js/snippets/base/**/*.js"
]
},
"bundle": {
"styles": "{$config.output}/demo/demo6/base/style.bundle.css",
"scripts": "{$config.output}/demo/demo6/base/scripts.bundle.js"
}
},
"custom": {
"src": {
"scripts": [
"{$config.path.src}/js/demo/demo6/custom/**/*.js"
],
"media": [
"{$config.path.src}/media/demo/demo6/**/*.*"
]
},
"output": {
"scripts": "{$config.output}/demo/demo6/custom/",
"media": "{$config.output}/demo/demo6/media/"
}
}
}
},
"snippets": {
"src": {
"scripts": [
"{$config.path.src}/js/snippets/custom/**/*.js"
]
},
"output": {
"scripts": "{$config.output}/snippets/"
}
},
"app": {
"src": {
"scripts": [
"{$config.path.src}/js/app/custom/**/*.js"
],
"media": [
"{$config.path.src}/media/app/**/*.*"
]
},
"output": {
"scripts": "{$config.output}/app/js",
"media": "{$config.output}/app/media"
}
}
}
}
Required Core CSS and JS files
Vendors list under build.vendors.base.src.mandatory is required, and the
build.vendors.base.src.optional is optional. Also JS & CSS files in
demo.[demo_id]* is required for specific demo styles and scripts.
* [demo_id] is the unique demo name, like default, demo2, demo3, etc.
Under snippets and
app nodes are for preview demo and optional.
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.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
theme/[root]/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 to be deployed to
assets/vendors/ folder 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
assets/vendors/base/vendors.bundle.js and
assets/vendors/base/vendors.bundle.css
The 3rd party plugin images or font files also will be deployed into
assets/vendors/base/images and
assets/vendors/base/fonts
build.vendors.custom
object
This object specifies 3rd party resources that are includable on demand from
assets/vendors/custom/ folder
build.demo.default
object
Default demo assets
build.demo.default.base
object
This object specifies the global assets of the demo to be added into the base css and js demo bundles
assets/demo/default/base/scripts.bundle.js
and assets/demo/default/base/styles.bundle.css
The media(e.g: images) of the demo are deployed into
assets/demo/default/media
build.demo.default.custom
object
This object specifies custom assets that are includable on demand from
assets/demo/default/custom/ folder
build.snippets
object
This object specifies snippets assets that are includable on demand from
assets/snippets/ folder
build.app
object
This object specifies application level global assets that are includable on demand from
assets/app/ folder.
Useful if you want to add custom scripts that are used in some spesific pages only.