The build config file is located at[metronic]/theme/default/[demo]/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": "6.0.7",
"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": "./../src/assets",
"node_modules": "./node_modules",
"demo_api_url": "https://keenthemes.com/metronic/tools/preview/"
},
"dist": [
"./../dist/assets"
]
},
"build": {
"plugins": {
"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/global/integration/plugins/bootstrap-datepicker.init.js"
]
},
"bootstrap-datetime-picker": {
"styles": [
"{$config.path.node_modules}/bootstrap-datetime-picker/css/bootstrap-datetimepicker.css"
],
"scripts": [
"{$config.path.node_modules}/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js"
]
},
"bootstrap-timepicker": {
"styles": [
"{$config.path.node_modules}/bootstrap-timepicker/css/bootstrap-timepicker.css"
],
"scripts": [
"{$config.path.node_modules}/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
"{$config.path.src}/js/global/integration/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/global/integration/plugins/bootstrap-switch.init.js"
]
},
"select2": {
"styles": [
"{$config.path.node_modules}/select2/dist/css/select2.css"
],
"scripts": [
"{$config.path.node_modules}/select2/dist/js/select2.full.js"
]
},
"ion-rangeslider": {
"styles": [
"{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.css"
],
"scripts": [
"{$config.path.node_modules}/ion-rangeslider/js/ion.rangeSlider.js"
],
"images": [
"{$config.path.node_modules}/ion-rangeslider/img/sprite-skin-flat.png"
]
},
"typeahead.js": {
"scripts": [
"{$config.path.node_modules}/typeahead.js/dist/typeahead.bundle.js",
"{$config.path.node_modules}/handlebars/dist/handlebars.js"
]
},
"inputmask": {
"scripts": [
"{$config.path.node_modules}/inputmask/dist/jquery.inputmask.bundle.js",
"{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.date.extensions.js",
"{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.numeric.extensions.js"
]
},
"nouislider": {
"styles": [
"{$config.path.node_modules}/nouislider/distribute/nouislider.css"
],
"scripts": [
"{$config.path.node_modules}/nouislider/distribute/nouislider.js"
]
},
"owl.carousel": {
"styles": [
"{$config.path.node_modules}/owl.carousel/dist/assets/owl.carousel.css",
"{$config.path.node_modules}/owl.carousel/dist/assets/owl.theme.default.css"
],
"scripts": [
"{$config.path.node_modules}/owl.carousel/dist/owl.carousel.js"
],
"images": [
"{$config.path.node_modules}/owl.carousel/dist/assets/owl.video.play.png",
"{$config.path.node_modules}/owl.carousel/dist/assets/ajax-loader.gif"
]
},
"autosize": {
"scripts": [
"{$config.path.node_modules}/autosize/dist/autosize.js"
]
},
"clipboard": {
"scripts": [
"{$config.path.node_modules}/clipboard/dist/clipboard.min.js"
]
},
"dropzone": {
"styles": [
"{$config.path.node_modules}/dropzone/dist/dropzone.css"
],
"scripts": [
"{$config.path.node_modules}/dropzone/dist/dropzone.js",
"{$config.path.src}/js/global/integration/plugins/dropzone.init.js"
]
},
"quil": {
"styles": [
"{$config.path.node_modules}/quill/dist/quill.snow.css"
],
"scripts": [
"{$config.path.node_modules}/quill/dist/quill.js"
]
},
"tagify": {
"styles": [
"{$config.path.node_modules}/@yaireo/tagify/dist/tagify.css"
],
"scripts": [
"{$config.path.node_modules}/@yaireo/tagify/dist/tagify.polyfills.min.js",
"{$config.path.node_modules}/@yaireo/tagify/dist/tagify.min.js"
]
},
"summernote": {
"styles": [
"{$config.path.node_modules}/summernote/dist/summernote.css"
],
"scripts": [
"{$config.path.node_modules}/summernote/dist/summernote.js"
],
"fonts": [
"{$config.path.node_modules}/summernote/dist/font/**"
]
},
"bootstrap-makrdown": {
"styles": [
"{$config.path.node_modules}/bootstrap-markdown/css/bootstrap-markdown.min.css"
],
"scripts": [
"{$config.path.node_modules}/markdown/lib/markdown.js",
"{$config.path.node_modules}/bootstrap-markdown/js/bootstrap-markdown.js",
"{$config.path.src}/js/global/integration/plugins/bootstrap-markdown.init.js"
]
},
"remarkable-bootstrap-notify": {
"scripts": [
"{$config.path.node_modules}/bootstrap-notify/bootstrap-notify.min.js",
"{$config.path.src}/js/global/integration/plugins/bootstrap-notify.init.js"
]
},
"jquery-validation": {
"scripts": [
"{$config.path.node_modules}/jquery-validation/dist/jquery.validate.js",
"{$config.path.node_modules}/jquery-validation/dist/additional-methods.js",
"{$config.path.src}/js/global/integration/plugins/jquery-validation.init.js"
]
},
"animate.css": {
"styles": [
"{$config.path.node_modules}/animate.css/animate.css"
]
},
"toastr": {
"styles": [
"{$config.path.node_modules}/toastr/build/toastr.css"
],
"scripts": [
"{$config.path.node_modules}/toastr/build/toastr.min.js"
]
},
"dual-listbox": {
"styles": [
"{$config.path.node_modules}/dual-listbox/dist/dual-listbox.css"
],
"scripts": [
"{$config.path.node_modules}/dual-listbox/dist/dual-listbox.js"
]
},
"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}/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/global/integration/plugins/sweetalert2.init.js"
]
},
"jquery.repeater": {
"scripts": [
"{$config.path.node_modules}/jquery.repeater/src/lib.js",
"{$config.path.node_modules}/jquery.repeater/src/jquery.input.js",
"{$config.path.node_modules}/jquery.repeater/src/repeater.js"
]
},
"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}/plugins/line-awesome/css/line-awesome.css"
],
"fonts": [
"{$config.path.src}/plugins/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/**"
]
},
"@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": {
"jquery-ui": {
"src": {
"styles": [
"{$config.path.src}/plugins/jquery-ui/jquery-ui.min.css"
],
"scripts": [
"{$config.path.src}/plugins/jquery-ui/jquery-ui.min.js"
],
"images": [
"{$config.path.src}/plugins/jquery-ui/images/*"
]
},
"bundle": {
"styles": "{$config.dist}/plugins/custom/jquery-ui/jquery-ui.bundle.css",
"scripts": "{$config.dist}/plugins/custom/jquery-ui/jquery-ui.bundle.js",
"images": "{$config.dist}/plugins/custom/jquery-ui/images"
}
},
"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/global/integration/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"
}
}
}
},
"theme": {
"base": {
"src": {
"styles": [
"{$config.path.src}/sass/style.scss"
],
"scripts": [
"{$config.path.src}/js/global/components/base/**/*.js",
"{$config.path.src}/js/global/layout/*.js"
]
},
"bundle": {
"styles": "{$config.dist}/css/style.bundle.css",
"scripts": "{$config.dist}/js/scripts.bundle.js"
}
},
"skins": {
"header": {
"src": {
"styles": [
"{$config.path.src}/sass/global/layout/header/skins/**/*.scss"
]
},
"output": {
"styles": "{$config.dist}/css/skins/header/"
}
},
"brand": {
"src": {
"styles": [
"{$config.path.src}/sass/global/layout/brand/skins/**/*.scss"
]
},
"output": {
"styles": "{$config.dist}/css/skins/brand/"
}
},
"aside": {
"src": {
"styles": [
"{$config.path.src}/sass/global/layout/aside/skins/**/*.scss"
]
},
"output": {
"styles": "{$config.dist}/css/skins/aside/"
}
}
},
"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/"
}
}
},
"media": {
"src": {
"media": [
"{$config.path.src}/media/**/*.*"
]
},
"output": {
"media": "{$config.dist}/media/"
}
}
}
}
Required Core CSS and JS files
Vendors list under build.plugins.base.src.mandatory
is required, and the
build.plugins.base.src.optional
is optional. Also JS & CSS files in
build.theme.base
is required for specific demo styles and scripts.
Build Config |
Field |
Type |
Description |
config.demo |
string |
Name of current demo ID. |
config.debug |
boolean |
Enable/disable debug console log. |
config.compile.rtl.enabled |
boolean |
Enable/disable compilation with RTL version of CSS along with default LTR CSS. |
config.compile.rtl.skip |
array |
An array of plugin to be skipped from being compile as RTL. |
config.compile.jsUglify |
boolean |
Enable/disable output Javascript minify. |
config.compile.cssMinify |
boolean |
Enable/disable output CSS minify. |
config.compile.jsSourcemaps |
boolean |
Enable/disable output Javascript with sourcemaps. |
config.compile.cssSourcemaps |
boolean |
Enable/disable output CSS with sourcemaps. |
config.path |
object |
Predefined paths the where src/ , node_modules/ and
[metronic]/theme/default/[demo]/src/ are located.
demo_api_url is the ajax API path used by datatables, dropdowns with live search and other json server side data source related demos.
|
config.dist |
object |
dist stands for
distributable and refers to the directories where the minified and bundled assets will be stored for production uses.
|
Build Items |
build.plugins.base |
object |
This object specifies global 3rd party resources to be added into the base css and js vendors bundles.
|
build.plugins.custom |
object |
This object specifies 3rd party resources.
|
build.theme.base |
object |
This object specifies the global assets of the demo to be added into the base css and js demo bundles.
|
build.theme.skins |
object |
This object specifies skins assets.
|
build.theme.pages |
object |
This object specifies custom assets that are included on demand.
|
build.media |
object |
Media folder.
|
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/default/demo1/tools/
For the first time launch, run the command below to install the npm dependencies defined in
[metronic]/theme/default/[demo]/tools/package.json
(if you haven't done it) :
yarn
After every modification in [metronic]/theme/default/[demo]/src/
, run below task to compile the assets as defined in
[metronic]/theme/default/[demo]/tools/gulp.config.json
:
gulp build
If gulp
command is not working, try to remove
[metronic]/theme/default/[demo]/tools/node_modules
folder, and reinstall dependencies using yarn
.
Provide 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=false
Provide parameter --js
to gulp task. This command will generate javascript assets only.
gulp build --js
Provide parameter --sass
to gulp task. This command will generate SCSS, SASS and CSS assets only.
gulp build --sass
Provide parameter --media
to gulp task. This command will generate all media, fonts, images, etc. assets only.
gulp build --media
Provide parameter --prod
to gulp task. This command will minify all the JS and CSS.
gulp --prod
Base theme CSS & JS in [metronic]/theme/default/[demo]/src/assets/
. When you run gulp build
, all CSS & JS from [metronic]/theme/default/[demo]/src/assets/
will be compiled and place
in several demo locations dist
. HTML files from [metronic]/theme/default/[demo]/src/
will be copied into dist
folder.
The compile output folder is defined in [metronic]/theme/default/[demo]/tools/gulp.config.json
file, under config.dist
.
You can create another compile output path.
"dist": [
"./../dist/**/assets"
]
The customization should be done from [metronic]/theme/default/[demo]/src/assets/
. After compilation refer to the distination folder [metronic]/theme/default/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
You also can run watcher separately for JS and SCSS.
gulp watch:js
gulp watch:scss