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.
This is Metronic 7 documentation!
Upon purchase you can get Metronic 7 version from our Github Repository.
Request Github access
The new Metronic 8 is now available with the most advanced Bootstrap 5, VueJS, React and Laravel
foundation with a solid light and dark mode design system,
extensive utility classes and custom made in-house components.
View Metronic 8 documentation
To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version. https://nodejs.org/en/
Gulp
Overview
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 --demo1If 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 --demo1Provide parameter --js to gulp task. This command will generate javascript assets only.
gulp --js --demo1Provide parameter --sass to gulp task. This command will generate SCSS, SASS and CSS assets only.
gulp --sass --demo1Provide parameter --media to gulp task. This command will generate all media, fonts, images, etc. assets only.
gulp --media --demo1Provide parameter --prod to gulp task. This command will minify all the JS and CSS.
gulp --prod --demo1The 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 --demo1You also can run watcher separately for JS and SCSS.
gulp watch:js --demo1gulp watch:scss --demo1Localhost
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 --demo1Keep 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,
});