Metronic

下一代应用程序的终极Bootstrap和Angular 6管理主题框架,一次购买永久包更新,当前版本5.5.5。

Build Tools

Overview

Metronic build tools provides easy package management and production deployment for any type of web application that also comes with powerful asset bundle tools to organize assets structure with custom bundling for production.

Metronic's central default.conf.json and angular.conf.json build config files allows you manage the entire assest bundling for production by taking advantage of yarn package manager.

Build Config

The build config file is located at [root]/tools/themes/metronic/[version_package].conf.json/[version_package].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.

{
    "config": {
        "demo": "",
        "debug": false,
        "compile": {
            "rtl": {
                "enabled": true,
                "skip" : [
                    "select2",
                    "socicon",
                    "line-awesome",
                    "flaticon",
                    "metronic",
                    "fontawesome5",
                    "jstree",
                    "owl.carousel",
                    "fullcalendar",
                    "bootstrap-datepicker",
                    "bootstrap-datetime-picker",
                    "bootstrap-switch",
                    "nouislider"
                ]
            },
            "jsUglify": false,
            "cssMinify": false,
            "jsSourcemaps": false,
            "cssSourcemaps": false
        },
        "path": {
            "src": "./../themes/themes/metronic/src",
            "node_modules": "./node_modules",
            "demo_api_url": "http://metronic.net.cnmetronic/preview/"
        },
        "dist": [
            "./../themes/themes/metronic/dist/preview/assets",
            "./../themes/themes/metronic/dist/default/**/assets",
            "./../themes/themes/metronic/dist/classic/assets"
        ]
    },
    "build": {
        "vendors": {
            "base": {
                "src": {
                    "mandatory": {
                        "jquery": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery/dist/jquery.js"
                            ]
                        },
                        "popper.js": {
                            "scripts": [
                                "{$config.path.node_modules}/popper.js/dist/umd/popper.js"
                            ]
                        },
                        "bootstrap": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap/dist/js/bootstrap.min.js"
                            ]
                        },
                        "js-cookie": {
                            "scripts": [
                                "{$config.path.node_modules}/js-cookie/src/js.cookie.js"
                            ]
                        },
                        "moment": {
                            "scripts": [
                                "{$config.path.node_modules}/moment/min/moment.min.js"
                            ]
                        },
                        "tooltip.js": {
                            "scripts": [
                                "{$config.path.node_modules}/tooltip.js/dist/umd/tooltip.min.js"
                            ]
                        },
                        "perfect-scrollbar": {
                            "styles": [
                                "{$config.path.node_modules}/perfect-scrollbar/css/perfect-scrollbar.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/perfect-scrollbar/dist/perfect-scrollbar.js"
                            ]
                        },
                        "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": []
                        },
                        "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",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-datepicker.init.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.full.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"
                            ]
                        },
                        "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"
                            ]
                        },
                        "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}/markdown/lib/markdown.js",
                                "{$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.min.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/dist/bootstrap-session-timeout.min.js"
                            ]
                        },
                        "jquery-idletimer": {
                            "scripts": [
                                "{$config.path.src}/vendors/jquery-idletimer/idle-timer.min.js"
                            ]
                        },
                        "counterup": {
                            "scripts": [
                                "{$config.path.node_modules}/waypoints/lib/jquery.waypoints.js",
                                "{$config.path.node_modules}/counterup/jquery.counterup.js"
                            ]
                        },
                        "sweetalert2": {
                            "styles": [
                                "{$config.path.node_modules}/sweetalert2/dist/sweetalert2.min.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/framework/components/plugins/base/sweetalert2.init.js"
                            ]
                        },
                        "socicon": {
                            "styles": [
                                "{$config.path.node_modules}/socicon/css/socicon.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/socicon/font/**"
                            ]
                        },
                        "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/**"
                            ]
                        },
                        "fontawesome5": {
                            "styles": [
                                "{$config.path.src}/vendors/fontawesome5/web-fonts-with-css/css/fontawesome-all.min.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/fontawesome5/web-fonts-with-css/webfonts/**"
                            ]
                        }
                    }
                },
                "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"
                        ],
                        "images": [
                            "{$config.path.src}/vendors/jquery-ui/images/*"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.js",
                        "images": "{$config.output}/vendors/custom/jquery-ui/images"
                    }
                },
                "fullcalendar": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/fullcalendar/dist/fullcalendar.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/fullcalendar/dist/fullcalendar.js",
                            "{$config.path.node_modules}/fullcalendar/dist/gcal.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.js"
                    }
                },
                "gmaps": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/gmaps/gmaps.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.output}/vendors/custom/gmaps/gmaps.js"
                    }
                },
                "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"
                    }
                },
                "jquery-flot": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.js",
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.resize.js",
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.categories.js",
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.pie.js",
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.stack.js",
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.crosshair.js",
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.axislabels.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.output}/vendors/custom/flot/flot.bundle.js"
                    }
                },
                "datatables.net": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/datatables.net-bs4/css/dataTables.bootstrap4.css",
                            "{$config.path.node_modules}/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-autofill-bs4/css/autoFill.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-keytable-bs4/css/keyTable.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-select-bs4/css/select.bootstrap4.min.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/datatables.net/js/jquery.dataTables.js",
                            "{$config.path.node_modules}/datatables.net-bs4/js/dataTables.bootstrap4.js",
                            "{$config.path.src}/js/framework/components/plugins/misc/datatables.init.js",

                            "{$config.path.node_modules}/datatables.net-autofill/js/dataTables.autoFill.min.js",
                            "{$config.path.node_modules}/datatables.net-autofill-bs4/js/autoFill.bootstrap4.min.js",

                            "{$config.path.node_modules}/jszip/dist/jszip.min.js",
                            "{$config.path.node_modules}/pdfmake/build/pdfmake.min.js",
                            "{$config.path.node_modules}/pdfmake/build/vfs_fonts.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/dataTables.buttons.min.js",
                            "{$config.path.node_modules}/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.colVis.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.flash.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.html5.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.print.js",

                            "{$config.path.node_modules}/datatables.net-colreorder/js/dataTables.colReorder.min.js",

                            "{$config.path.node_modules}/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",

                            "{$config.path.node_modules}/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",

                            "{$config.path.node_modules}/datatables.net-keytable/js/dataTables.keyTable.min.js",

                            "{$config.path.node_modules}/datatables.net-responsive/js/dataTables.responsive.min.js",
                            "{$config.path.node_modules}/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js",

                            "{$config.path.node_modules}/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",

                            "{$config.path.node_modules}/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",

                            "{$config.path.node_modules}/datatables.net-scroller/js/dataTables.scroller.min.js",

                            "{$config.path.node_modules}/datatables.net-select/js/dataTables.select.min.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/datatables/datatables.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/datatables/datatables.bundle.js"
                    }
                }
            }
        },
        "demo": {
            "default": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/default/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/plugins/misc/mdatatable.init.js",
                            "{$config.path.src}/js/framework/components/general/**/*.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/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.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/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.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/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.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/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.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/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.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/"
                    }
                }
            },
            "demo7": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo7/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo7/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo7/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo7/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo7/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo7/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo7/custom/",
                        "media": "{$config.output}/demo/demo7/media/"
                    }
                }
            },
            "demo8": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo8/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo8/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo8/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo8/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo8/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo8/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo8/custom/",
                        "media": "{$config.output}/demo/demo8/media/"
                    }
                }
            },
            "demo9": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo9/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo9/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo9/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo9/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo9/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo9/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo9/custom/",
                        "media": "{$config.output}/demo/demo9/media/"
                    }
                }
            },
            "demo10": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo10/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo10/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo10/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo10/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo10/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo10/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo10/custom/",
                        "media": "{$config.output}/demo/demo10/media/"
                    }
                }
            },
            "demo11": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo11/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo11/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo11/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo11/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo11/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo11/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo11/custom/",
                        "media": "{$config.output}/demo/demo11/media/"
                    }
                }
            },
            "demo12": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo12/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo12/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo12/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo12/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo12/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo12/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo12/custom/",
                        "media": "{$config.output}/demo/demo12/media/"
                    }
                }
            }
        },
        "snippets": {
            "apps": {
                "src": {
                    "scripts": [
                        "{$config.path.src}/js/snippets/apps/**/*.js"
                    ]
                },
                "output": {
                    "scripts": "{$config.output}/snippets/apps"
                }
            },
            "custom": {
                "src": {
                    "scripts": [
                        "{$config.path.src}/js/snippets/custom/**/*.js"
                    ]
                },
                "output": {
                    "scripts": "{$config.output}/snippets/custom"
                }
            }
        },
        "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 build.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 plugins.

Build Config
Field Type Description
config.demo string Specify an ID of the selected demo for gulp tool to build assets only for selected demo
config.debug boolean Enable/disable debug console log.
config.compile.rtl.enabled boolean Enable/disable compilation with RTL version of CSS along with default LTR CSS.
config.compile.rtl.skip array An array of plugin to be skipped from being compile as RTL.
config.compile.jsUglify boolean Enable/disable output Javascript minify.
config.compile.cssMinify boolean Enable/disable output CSS minify.
config.compile.jsSourcemaps boolean Enable/disable output Javascript with sourcemaps.
config.compile.cssSourcemaps boolean Enable/disable output CSS with sourcemaps.
config.path object Predefined paths the where src/, node_modules/ and 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.

Build Tasks

Update the Node.js, global npm and yarn to the latest version, if you got the error related to the node-sass.

Make sure that before running below tasks the demo parameter in [root]/tools/themes/metronic/[version_package].conf.json/[version_package].json is set to your current selected demo id (e.g: default, demo2, demo8 or demo12).
Leave the demo parameter empty to build for all demos.
Set config.path.demo_api_url parameter in [root]/tools/themes/metronic/[version_package].conf.json/[version_package].json URL to your installed localhost API.

Launch your terminal and change its current directory to the project's tools folder where the build files are located. All commands below must be run in this tools folder.

cd [root]/tools/

For the first time launch, run the command below to install the npm dependencies defined in [root]/tools/package.json (if you haven't done it) :

yarn install

For the first time or after every modification in [root]/src/, run below task to compile the assets as defined in [root]/tools/themes/metronic/[version_package].conf.json/[version_package].json :

gulp

Provide argument --prod to build assets with JS and CSS minify enabled.

gulp --prod

Run below task to update server side ajax demo API URL fix (required fix for angular and html versions) as defined in config.path.demo_api_url right after gulp task completed:

gulp apiurl

For Angular assets, use gulp command with flag --angular for the assets compilation.

gulp --prod --angular

Base theme CSS & JS in [root]/src/. When you run gulp, all CSS & JS from [root]/src/ will be compiled and place into several demo locations, for Angular and static HTML. The compile output folder is defined in [root]/tools/themes/metronic/[version_package].conf.json/[version_package].json file, under config.dist. You can create another compile output path.

"dist": [
	"./../themes/themes/metronic/dist/preview/assets",
	"./../themes/themes/metronic/dist/default/**/assets"
]

Gulp can run automatically when a file changed. Watch tasks file is located in [root]/tools/gulp/watch.js.

To run watcher for all JS and CSS files. Run command below.

gulp watch

You also can run watcher separately for JS and CSS.

gulp watch:js
gulp watch:scss
我运营着一个由20个产品经理,开发人员,QA和UX资源组成的团队。以前我们自己设计了一切。对于我们最新的平台,我们试用了Metronic。我无法高估Metronic的影响力。它加速了3倍的开发,并将质量保证问题减少了50%。如果你减少了对设计时间/资源的需求,开发速度的提高和质量保证的减少,那么这个项目可能只为我们节省了10万美元,我计划将它用于所有平台。
设计的灵活性也使我们能够提供更好的外观和工作平台,并使我的头痛减少90%。谢谢KeenThemes! Jonathan Bartlett, Metronic 客户

强大的框架

Metronic的所有产品都可在全球范围内定制,以提供无限的独特风格项目

多演示

为数百个演示中的下一个项目选择一个完美的设计

无限组件

利用最新的UI / UX交易为您的应用程序提供大量组件的大量组件

Angular 6支持

企业级Angular 6集成了内置的身份验证模块等等

Bootstrap 4

Metronic深度定制Bootstrap,具有原生外观

独家数据库插件

我们超级时尚和直观的Datatable包含所有先进的CRUD功能

60,000+强

Metronic是全球60,000多名开发商信赖的唯一主题

持续更新

使用新演示和功能的终身更新得到保证

质量准则

Metronic是一个具有代码结构的作家,所有开发人员都可以轻松拿起并坠入爱河

全球超过60,000名开发人员信赖的Ultimate Bootstrap Admin主题