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!
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 --demo1
If gulp
command is not working, try to remove
[metronic]/theme/html/tools/node_modules
folder, and reinstall dependencies using yarn
.
Provide parameter --rtl=true
to gulp task. This command disable from generating RTL CSS. If this param does not exist, by default RTL generate will be
enabled.
gulp --rtl=true --demo1
Provide parameter --js
to gulp task. This command will generate javascript assets only.
gulp --js --demo1
Provide parameter --sass
to gulp task. This command will generate SCSS, SASS and CSS assets only.
gulp --sass --demo1
Provide parameter --media
to gulp task. This command will generate all media, fonts, images, etc. assets only.
gulp --media --demo1
Provide parameter --prod
to gulp task. This command will minify all the JS and CSS.
gulp --prod --demo1
The customization should be done from [metronic]/theme/html/[demo]/src/
. After compilation refer to the destination folder [metronic]/theme/html/dist/
.
This command use to start the real-time watcher. This task watches the sass/js files and automatically recompile whenever the source files are changed.
To run watcher for all JS and SCSS files. Run command below.
gulp watch --demo1
You also can run watcher separately for JS and SCSS.
gulp watch:js --demo1
gulp watch:scss --demo1
Localhost
Gulp-connect
plugin use to run a simple webserver to run the HTML files.
Note that server side ajax examples are not supported using this webserver and for full functionality, please refer to online preview:
https://keenthemes.com/metronic/preview
For the server side scripts demos, refer to the [metronic]/docs/api_reference
in the docs folder.
Open a console
and run below command.
gulp localhost --demo1
Keep the console open. Open this link to run http://localhost:8080/
The default running port is 8080
. In case, this port being used by other application, it can be changed in [metronic]/theme/html/tools/gulp/watch.js
connect.server({
root: '../' + demo + '/dist',
livereload: true,
port: 8081,
});