# Documentation v8.0.38

Preview Downloads Purchase
Metronic's Gulpbuild tools provide 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.

# Gulp Quick Start

1. Download the latest theme source from the Marketplace.
2. Download and install Node.js from Nodejs. The suggested version to install is `16.x LTS`.
3. Start a command prompt window or terminal and change directory to `[unpacked path]/theme/tools/`:

       cd theme/tools/

4. Install the latest NPM:

       npm install --global npm@latest

5. Install Yarn via the NPM:

       npm install --global yarn

   Don't forget to run `yarn upgrade`after every Metronic update is released in order to receive newly added or updated 3rd-party plugins.
   Use `npm cache clean --force`command, if the installation had failed at any step. Retry again from beginning once it's done.
6. Gulp is a toolkit that helps you automate your time-consuming tasks in development workflow. To install gulp globally:

       npm install --global gulp-cli

   If you have previously installed a version of gulp globally, remove it to make sure old version doesn't collide with new gulp-cli:

       npm rm --global gulp

   Verify that gulp in successfully installed, and version of installed gulp will appear ( `CLI version: 2.3.0 Local version: 4.0.2`):

       gulp --version

   if you're ran into a `ReferenceError: primordials is not defined`error when running gulp in the terminal, you may have an incompatibility between the node version and gulp. Use below command to force install gulp version.
   `npm install gulp@^4.0.2`
7. Install the Metronic dependencies in `[unpacked path]/theme/tools/`folder.

       yarn

   We recommend using `Yarn`instead `NPM`for the Metronic dependencies setup. `Yarn`supports nested dependencies resolutions in `package.json`where spesific version of sub dependacies are required such as `resolutions: { "gulp-dart-sass/sass": "1.32.13" }`.
8. The below command will compile all the assets(sass, js, media) to `dist/assets/`folder: State which demo to compile and append at the end of the command. Eg. `--demo1`

       gulp --demo1

   If you had any error at this step during compilation. Try to update `gulp`to the latest version. `npm install --global gulp-cli`
9. Start the localhost server:

       gulp localhost

   Keep the console open. Open this link to run `http://localhost:8080/demo1/dist/` . It will take a few seconds for the build to finish. To stop a localhost environment, press `Ctrl+C`.

# Build Options

The build config file is located at `tools/gulp.config.json`and you can fully customize the build settings to meet your project requirements.

    {
        "name": "{theme}",
        "desc": "Gulp build config file",
        "version": "{version}",
        "config": {
            "debug": false,
            "compile": {
                "rtl": {
                    "enabled": false,
                    "skip": [
                        "select2",
                        "line-awesome",
                        "fontawesome5",
                        "nouislider",
                        "tinymce",
                        "sweetalert2"
                    ]
                },
                "jsUglify": false,
                "cssMinify": true,
                "jsSourcemaps": false,
                "cssSourcemaps": false
            },
            "path": {
                "src": "../../../themes/{theme}/html/src",
                "common_src": "../src",
                "node_modules": "node_modules"
            },
            "dist": [
                "../../../themes/{theme}/html/dist/assets"
            ]
        },
        "build": {
            "base": {
                "src": {
                    "styles": [
                        "{$config.path.src}/sass/style.scss"
                    ],
                    "scripts": [
                        "{$config.path.common_src}/js/components/**/*.js",
                        "{$config.path.common_src}/js/layout/**/*.js",
                        "{$config.path.src}/js/layout/**/*.js"
                    ]
                },
                "dist": {
                    "styles": "{$config.dist}/css/style.bundle.css",
                    "scripts": "{$config.dist}/js/scripts.bundle.js"
                }
            },
            "plugins": {
                "global": {
                    "src": {
                        "mandatory": {
                            "jquery": {
                                "scripts": [
                                    "{$config.path.node_modules}/jquery/dist/jquery.js"
                                ]
                            },
                            "popper.js": {
                                "scripts": [
                                    "{$config.path.node_modules}/@popperjs/core/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"
                                ]
                            }
                        },
                        "optional": {
                            "select2": {
                                "styles": [
                                    "{$config.path.node_modules}/select2/dist/css/select2.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/select2/dist/js/select2.full.js",
                                    "{$config.path.common_src}/js/vendors/plugins/select2.init.js"
                                ]
                            },
                            "flatpickr": {
                                "styles": [
                                    "{$config.path.node_modules}/flatpickr/dist/flatpickr.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/flatpickr/dist/flatpickr.js",
                                    "{$config.path.common_src}/js/vendors/plugins/flatpickr.init.js"
                                ]
                            },
                            "formvalidation": {
                                "styles": [
                                    "{$config.path.common_src}/plugins/formvalidation/dist/css/formValidation.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/es6-shim/es6-shim.min.js",
                                    "{$config.path.common_src}/plugins/formvalidation/dist/js/FormValidation.full.min.js",
                                    "{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/Bootstrap5.min.js"
                                ]
                            },
                            "daterangepicker": {
                                "styles": [
                                    "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js"
                                ]
                            },
                            "bootstrap-maxlength": {
                                "scripts": [
                                    "{$config.path.node_modules}/bootstrap-maxlength/src/bootstrap-maxlength.js"
                                ]
                            },
                            "bootstrap-multiselectsplitter": {
                                "scripts": [
                                    "{$config.path.common_src}/plugins/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js"
                                ]
                            },
                            "inputmask": {
                                "scripts": [
                                    "{$config.path.node_modules}/inputmask/dist/inputmask.js",
                                    "{$config.path.node_modules}/inputmask/dist/bindings/inputmask.binding.js",
                                    "{$config.path.node_modules}/inputmask/dist/lib/extensions/inputmask.date.extensions.js",
                                    "{$config.path.node_modules}/inputmask/dist/lib/extensions/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.common_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"
                                ]
                            },
                            "tiny-slider": {
                                "styles": [
                                    "{$config.path.node_modules}/tiny-slider/dist/tiny-slider.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/tiny-slider/dist/tiny-slider.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"
                                ]
                            },
                            "bootstrap-markdown": {
                                "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.common_src}/js/vendors/plugins/bootstrap-markdown.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"
                                ]
                            },
                            "chart.js": {
                                "styles": [
                                    "{$config.path.node_modules}/chart.js/dist/Chart.css"
                                ],
                                "scripts": [
                                    "{$config.path.node_modules}/chart.js/dist/Chart.js"
                                ]
                            },
                            "bootstrap-session-timeout": {
                                "scripts": [
                                    "{$config.path.common_src}/plugins/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js"
                                ]
                            },
                            "jquery-idletimer": {
                                "scripts": [
                                    "{$config.path.common_src}/plugins/jquery-idletimer/idle-timer.min.js"
                                ]
                            },
                            "countup.js": {
                                "scripts": [
                                    "{$config.path.node_modules}/countup.js/dist/countUp.umd.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.common_src}/js/vendors/plugins/sweetalert2.init.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/**"
                                ]
                            },
                            "bootstrap-icons": {
                                "styles": [
                                    "{$config.path.node_modules}/bootstrap-icons/font/bootstrap-icons.css"
                                ],
                                "fonts": [
                                    "{$config.path.node_modules}/bootstrap-icons/font/fonts/**"
                                ]
                            },
                            "@fortawesome": {
                                "styles": [
                                    "{$config.path.node_modules}/@fortawesome/fontawesome-free/css/all.min.css"
                                ],
                                "fonts": [
                                    "{$config.path.node_modules}/@fortawesome/fontawesome-free/webfonts/**"
                                ]
                            }
                        },
                        "override": {
                            "styles": [
                                "{$config.path.src}/sass/plugins.scss"
                            ]
                        }
                    },
                    "dist": {
                        "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"
                            ]
                        },
                        "dist": {
                            "scripts": "{$config.dist}/plugins/custom/draggable/draggable.bundle.js"
                        }
                    },
                    "prismjs": {
                        "src": {
                            "styles": [
                                "{$config.path.node_modules}/prism-themes/themes/prism-shades-of-purple.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/prismjs/prism.js",
                                "{$config.path.node_modules}/prismjs/components/prism-bash.js",
                                "{$config.path.node_modules}/prismjs/components/prism-javascript.js",
                                "{$config.path.node_modules}/prismjs/components/prism-scss.js",
                                "{$config.path.node_modules}/prismjs/components/prism-css.js",
                                "{$config.path.node_modules}/prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js",
                                "{$config.path.common_src}/js/vendors/plugins/prism.init.js"
                            ]
                        },
                        "dist": {
                            "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"
                            ]
                        },
                        "dist": {
                            "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"
                            ]
                        },
                        "dist": {
                            "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"
                            ]
                        },
                        "dist": {
                            "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.common_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"
                            ]
                        },
                        "dist": {
                            "styles": "{$config.dist}/plugins/custom/datatables/datatables.bundle.css",
                            "scripts": "{$config.dist}/plugins/custom/datatables/datatables.bundle.js"
                        }
                    },
                    "jkanban": {
                        "src": {
                            "styles": [
                                "{$config.path.node_modules}/jkanban/dist/jkanban.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/jkanban/dist/jkanban.min.js"
                            ]
                        },
                        "dist": {
                            "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"
                            ]
                        },
                        "dist": {
                            "styles": "{$config.dist}/plugins/custom/leaflet/leaflet.bundle.css",
                            "scripts": "{$config.dist}/plugins/custom/leaflet/leaflet.bundle.js"
                        }
                    }
                }
            },
            "custom": {
                "src": {
                    "styles": [
                        "{$config.path.common_src}/sass/custom/**/*.scss",
                        "{$config.path.src}/sass/custom/**/*.scss"
                    ],
                    "scripts": [
                        "{$config.path.common_src}/js/custom/**/*.js",
                        "{$config.path.src}/js/custom/**/*.js"
                    ]
                },
                "dist": {
                    "styles": "{$config.dist}/css/custom/",
                    "scripts": "{$config.dist}/js/custom/"
                }
            },
            "media": {
                "src": {
                    "media": [
                        "{$config.path.src}/media/**/*.*",
                        "{$config.path.common_src}/media/**/*.*"
                    ]
                },
                "dist": {
                    "media": "{$config.dist}/media/"
                }
            },
            "api": {
                "src": {
                    "media": [
                        "{$config.path.src}/api/**/*.*",
                        "{$config.path.common_src}/api/**/*.*"
                    ]
                },
                "dist": {
                    "media": "{$config.dist}/api/"
                }
            }
        }
    }

#### Required Core CSS and JS files

The core CSS and JS files defined under `build.plugins.base.src.mandatory`and `build.theme.base`are required in order to have the theme's basic functionality up. However the assets defined `build.plugins.base.src.optional`are optional.

Gulp Build Options
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.base` | `object` | This object specifies the global assets of the demo to be added into the global css and js demo bundles.
`build.plugins.global` | `object` | This object specifies required 3rd party resources to be added into the global css and js plugins bundles.
`build.plugins.custom` | `object` | This object specifies global 3rd party resources to be added into the custom css and js plugins bundles.
`build.custom` | `object` | This object specifies custom assets that are included on demand.
`build.media` | `object` | Media folder.
`build.api` | `object` | Server side scripts used for examples with remote data source(e.g: ajax datatables, dropdown list, quick search results, etc).

# Build Task

Update the `Node.js`, global `npm`and `yarn`to the latest versions for any errors related to `node-sass`.
If the `gulp`command is not working, try to remove `tools/node_modules`folder, and reinstall dependencies using `yarn`.

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/tools/

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

    yarn

After every modification in `[demo]/src/`, run the below task to compile the assets as defined in `/tools/gulp.config.json`:

    gulp --demo1

Provide parameter `--rtl`to the gulp task. This command will disable RTL CSS from generating. If this param does not exist, by default, RTL CSS will be generated.

    gulp --rtl --demo1

Provide parameter `--js`to the gulp task. This command will generate javascript assets only.

    gulp --js --demo1

Provide parameter `--sass`to the gulp task. This command will generate SCSS, SASS and CSS assets only.

    gulp --sass --demo1

Provide parameter `--media`to the gulp task. This command will generate all media, fonts, images, etc. assets only.

    gulp --media --demo1

Provide parameter `--prod`to the gulp task. This command will minify all the JS and CSS.

    gulp --prod --demo1

The customization should be done in `theme/src/`folder. After compilation refer to the destination folder `theme/dist/`. The bellow command is to start a real-time watcher. This task watches the SCSS and Javascript files and automatically recompile whenever the source files are changed. You also can run watcher separately for JS and SCSS.

    gulp watch --demo1

# Localhost

Metronic uses Gulp-connectplugin use to run a simple webserver for quick browsing the HTML templatest:

    gulp localhost

Keep the console open. Open this link to run `http://localhost:8080/'.(Theme::isMultiDemo()?'demo1/':'').'dist/` . The default running port is `8080`and in case, this port being used by other application, it can be changed in `tools/gulp/watch.js`

    connect.server({
      root: '../dist',
      livereload: true,
      port: 8081,
    });

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now