logo Multi Demo Bootstrap Admin Dashboard Theme

Gulp

Overview

Keen 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.

Keen's central gulp.config.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[keen]/theme/tools/gulp.config.json and you can fully customize the build settings to meet your project requirements:

Check the dist output path config.dist for the build tools to output the compilation.

{
    "name": "keen",
    "theme": "keen",
    "desc": "Keen Build Config File For Gulp",
    "version": "2.0.1",
    "config": {
        "debug": false,
        "compile": {
            "rtl": {
                "enabled": false,
                "skip": [
                    "select2",
                    "socicon",
                    "line-awesome",
                    "flaticon",
                    "flaticon2",
                    "fontawesome5",
                    "jstree",
                    "owl.carousel",
                    "fullcalendar",
                    "bootstrap-datepicker",
                    "bootstrap-switch",
                    "tempusdominus-bootstrap-4",
                    "nouislider",
                    "tinymce",
                    "sweetalert2",
                    "jquery-mask-plugin"
                ]
            },
            "jsMinify": false,
            "cssMinify": false,
            "jsSourcemaps": false,
            "cssSourcemaps": false
        },
        "path": {
            "src": "./../{demo}/src",
            "node_modules": "./node_modules"
        },
        "dist": [
            "./../{demo}/dist/assets"
        ]
    },
    "build": {
        "main": {
            "src": {
                "styles": [
                    "{$config.path.src}/sass/style.scss"
                ],
                "scripts": [
                    "{$config.path.src}/js/components/**/*.js",
                    "{$config.path.src}/js/layout/**/*.js"
                ]
            },
            "bundle": {
                "styles": "{$config.dist}/css/style.bundle.css",
                "scripts": "{$config.dist}/js/scripts.bundle.js"
            }
        },
        "vendors": {
            "base": {
                "src": {
                    "mandatory": {
                        "jquery": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery/dist/jquery.js"
                            ]
                        },
                        "popper.js": {
                            "scripts": [
                                "{$config.path.node_modules}/popper.js/dist/umd/popper.js"
                            ]
                        },
                        "bootstrap": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap/dist/js/bootstrap.min.js"
                            ]
                        },
                        "moment": {
                            "scripts": [
                                "{$config.path.node_modules}/moment/min/moment-with-locales.min.js"
                            ]
                        },
                        "perfect-scrollbar": {
                            "styles": [
                                "{$config.path.node_modules}/perfect-scrollbar/css/perfect-scrollbar.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/perfect-scrollbar/dist/perfect-scrollbar.js"
                            ]
                        },
                        "wnumb": {
                            "scripts": [
                                "{$config.path.node_modules}/wnumb/wNumb.js"
                            ]
                        },
                        "keenthemes-icons": {
                            "styles": [
                                "{$config.path.src}/plugins/keenthemes-icons/font/ki.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/plugins/keenthemes-icons/font/**"
                            ]
                        }
                    },
                    "optional": {
                        "formvalidation": {
                            "styles": [
                                "{$config.path.src}/plugins/formvalidation/dist/css/formValidation.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/es6-shim/es6-shim.min.js",
                                "{$config.path.src}/plugins/formvalidation/dist/js/FormValidation.full.min.js",
                                "{$config.path.src}/plugins/formvalidation/dist/js/plugins/Bootstrap.min.js",
                                "{$config.path.src}/plugins/formvalidation/dist/js/plugins/Bootstrap.min.js"
                            ]
                        },
                        "block-ui": {
                            "scripts": [
                                "{$config.path.node_modules}/block-ui/jquery.blockUI.js"
                            ]
                        },
                        "bootstrap-datepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
                                "{$config.path.src}/js/vendors/plugins/bootstrap-datepicker.init.js"
                            ]
                        },
                        "tempusdominus-bootstrap-4": {
                            "styles": [
                                "{$config.path.node_modules}/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js",
                                "{$config.path.src}/js/vendors/plugins/tempusdominus-bootstrap-4.init.js"
                            ]
                        },
                        "bootstrap-timepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-timepicker/css/bootstrap-timepicker.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
                                "{$config.path.src}/js/vendors/plugins/bootstrap-timepicker.init.js"
                            ]
                        },
                        "bootstrap-daterangepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js"
                            ]
                        },
                        "bootstrap-touchspin": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.js"
                            ]
                        },
                        "bootstrap-maxlength": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-maxlength/src/bootstrap-maxlength.js"
                            ]
                        },
                        "bootstrap-multiselectsplitter": {
                            "scripts": [
                                "{$config.path.src}/plugins/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js"
                            ]
                        },
                        "bootstrap-select": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-select/dist/css/bootstrap-select.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-select/dist/js/bootstrap-select.js"
                            ]
                        },
                        "bootstrap-switch": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-switch/dist/js/bootstrap-switch.js",
                                "{$config.path.src}/js/vendors/plugins/bootstrap-switch.init.js"
                            ]
                        },
                        "select2": {
                            "styles": [
                                "{$config.path.node_modules}/select2/dist/css/select2.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/select2/dist/js/select2.full.js"
                            ]
                        },
                        "ion-rangeslider": {
                            "styles": [
                                "{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/ion-rangeslider/js/ion.rangeSlider.js"
                            ],
                            "images": [
                                "{$config.path.node_modules}/ion-rangeslider/img/sprite-skin-flat.png"
                            ]
                        },
                        "typeahead.js": {
                            "scripts": [
                                "{$config.path.node_modules}/typeahead.js/dist/typeahead.bundle.js",
                                "{$config.path.node_modules}/handlebars/dist/handlebars.js"
                            ]
                        },
                        "inputmask": {
                            "scripts": [
                                "{$config.path.node_modules}/inputmask/dist/jquery.inputmask.bundle.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.date.extensions.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.numeric.extensions.js"
                            ]
                        },
                        "jquery-mask-plugin": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery-mask-plugin/dist/jquery.mask.js"
                            ]
                        },
                        "nouislider": {
                            "styles": [
                                "{$config.path.node_modules}/nouislider/distribute/nouislider.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/nouislider/distribute/nouislider.js"
                            ]
                        },
                        "autosize": {
                            "scripts": [
                                "{$config.path.node_modules}/autosize/dist/autosize.js"
                            ]
                        },
                        "clipboard": {
                            "scripts": [
                                "{$config.path.node_modules}/clipboard/dist/clipboard.min.js"
                            ]
                        },
                        "dropzone": {
                            "styles": [
                                "{$config.path.node_modules}/dropzone/dist/dropzone.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/dropzone/dist/dropzone.js",
                                "{$config.path.src}/js/vendors/plugins/dropzone.init.js"
                            ]
                        },
                        "quil": {
                            "styles": [
                                "{$config.path.node_modules}/quill/dist/quill.snow.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/quill/dist/quill.js"
                            ]
                        },
                        "tagify": {
                            "styles": [
                                "{$config.path.node_modules}/@yaireo/tagify/dist/tagify.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/@yaireo/tagify/dist/tagify.polyfills.min.js",
                                "{$config.path.node_modules}/@yaireo/tagify/dist/tagify.min.js"
                            ]
                        },
                        "summernote": {
                            "styles": [
                                "{$config.path.node_modules}/summernote/dist/summernote-bs4.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/summernote/dist/summernote-bs4.js"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/summernote/dist/font/**"
                            ]
                        },
                        "bootstrap-makrdown": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-markdown/css/bootstrap-markdown.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/markdown/lib/markdown.js",
                                "{$config.path.node_modules}/bootstrap-markdown/js/bootstrap-markdown.js",
                                "{$config.path.src}/js/vendors/plugins/bootstrap-markdown.init.js"
                            ]
                        },
                        "remarkable-bootstrap-notify": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-notify/bootstrap-notify.min.js",
                                "{$config.path.src}/js/vendors/plugins/bootstrap-notify.init.js"
                            ]
                        },
                        "animate.css": {
                            "styles": [
                                "{$config.path.node_modules}/animate.css/animate.css"
                            ]
                        },
                        "toastr": {
                            "styles": [
                                "{$config.path.node_modules}/toastr/build/toastr.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/toastr/build/toastr.min.js"
                            ]
                        },
                        "dual-listbox": {
                            "styles": [
                                "{$config.path.node_modules}/dual-listbox/dist/dual-listbox.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/dual-listbox/dist/dual-listbox.js"
                            ]
                        },
                        "apexcharts": {
                            "styles": [
                                "{$config.path.node_modules}/apexcharts/dist/apexcharts.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/apexcharts/dist/apexcharts.min.js"
                            ]
                        },
                        "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.src}/plugins/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js"
                            ]
                        },
                        "jquery-idletimer": {
                            "scripts": [
                                "{$config.path.src}/plugins/jquery-idletimer/idle-timer.min.js"
                            ]
                        },
                        "counterup": {
                            "scripts": [
                                "{$config.path.node_modules}/waypoints/lib/jquery.waypoints.js",
                                "{$config.path.node_modules}/counterup/jquery.counterup.js"
                            ]
                        },
                        "sweetalert2": {
                            "styles": [
                                "{$config.path.node_modules}/sweetalert2/dist/sweetalert2.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/es6-promise-polyfill/promise.min.js",
                                "{$config.path.node_modules}/sweetalert2/dist/sweetalert2.min.js",
                                "{$config.path.src}/js/vendors/plugins/sweetalert2.init.js"
                            ]
                        },
                        "sticky-js": {
                            "scripts": [
                                "{$config.path.node_modules}/sticky-js/dist/sticky.min.js"
                            ]
                        },
                        "jquery.repeater": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery.repeater/src/lib.js",
                                "{$config.path.node_modules}/jquery.repeater/src/jquery.input.js",
                                "{$config.path.node_modules}/jquery.repeater/src/repeater.js"
                            ]
                        },
                        "line-awesome": {
                            "styles": [
                                "{$config.path.node_modules}/line-awesome/dist/line-awesome/css/line-awesome.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/line-awesome/dist/line-awesome/fonts/**"
                            ]
                        },
                        "flaticon": {
                            "styles": [
                                "{$config.path.src}/plugins/flaticon/flaticon.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/plugins/flaticon/font/**"
                            ]
                        },
                        "flaticon2": {
                            "styles": [
                                "{$config.path.src}/plugins/flaticon2/flaticon.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/plugins/flaticon2/font/**"
                            ]
                        },
                        "socicon": {
                            "styles": [
                                "{$config.path.node_modules}/socicon/css/socicon.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/socicon/font/**"
                            ]
                        },
                        "@fortawesome": {
                            "styles": [
                                "{$config.path.node_modules}/@fortawesome/fontawesome-free/css/all.min.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/@fortawesome/fontawesome-free/webfonts/**"
                            ]
                        }
                    }
                },
                "bundle": {
                    "styles": "{$config.dist}/plugins/global/plugins.bundle.css",
                    "scripts": "{$config.dist}/plugins/global/plugins.bundle.js",
                    "images": "{$config.dist}/plugins/global/images",
                    "fonts": "{$config.dist}/plugins/global/fonts"
                }
            },
            "custom": {
                "draggable": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.bundle.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.bundle.legacy.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/sortable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/droppable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/swappable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/collidable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/resize-mirror.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/snappable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/swap-animation.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.dist}/plugins/custom/draggable/draggable.bundle.js"
                    }
                },
                "prismjs": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/prismjs/themes/prism.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/prismjs/prism.js",
                            "{$config.path.node_modules}/prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js",
                            "{$config.path.src}/js/vendors/plugins/prism.init.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.dist}/plugins/custom/prismjs/prismjs.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/prismjs/prismjs.bundle.js"
                    }
                },
                "fullcalendar": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/@fullcalendar/core/main.css",
                            "{$config.path.node_modules}/@fullcalendar/daygrid/main.css",
                            "{$config.path.node_modules}/@fullcalendar/list/main.css",
                            "{$config.path.node_modules}/@fullcalendar/timegrid/main.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/@fullcalendar/core/main.js",
                            "{$config.path.node_modules}/@fullcalendar/daygrid/main.js",
                            "{$config.path.node_modules}/@fullcalendar/google-calendar/main.js",
                            "{$config.path.node_modules}/@fullcalendar/interaction/main.js",
                            "{$config.path.node_modules}/@fullcalendar/list/main.js",
                            "{$config.path.node_modules}/@fullcalendar/timegrid/main.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.dist}/plugins/custom/fullcalendar/fullcalendar.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/fullcalendar/fullcalendar.bundle.js"
                    }
                },
                "gmaps": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/gmaps/gmaps.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.dist}/plugins/custom/gmaps/gmaps.js"
                    }
                },
                "flot": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/flot/dist/es5/jquery.flot.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.resize.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.categories.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.pie.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.stack.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.crosshair.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.axislabels.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.dist}/plugins/custom/flot/flot.bundle.js"
                    }
                },
                "datatables.net": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/datatables.net-bs4/css/dataTables.bootstrap4.css",
                            "{$config.path.node_modules}/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-autofill-bs4/css/autoFill.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-keytable-bs4/css/keyTable.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-select-bs4/css/select.bootstrap4.min.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/datatables.net/js/jquery.dataTables.js",
                            "{$config.path.node_modules}/datatables.net-bs4/js/dataTables.bootstrap4.js",
                            "{$config.path.src}/js/vendors/plugins/datatables.init.js",
                            "{$config.path.node_modules}/datatables.net-autofill/js/dataTables.autoFill.min.js",
                            "{$config.path.node_modules}/datatables.net-autofill-bs4/js/autoFill.bootstrap4.min.js",
                            "{$config.path.node_modules}/jszip/dist/jszip.min.js",
                            "{$config.path.node_modules}/pdfmake/build/pdfmake.min.js",
                            "{$config.path.node_modules}/pdfmake/build/vfs_fonts.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/dataTables.buttons.min.js",
                            "{$config.path.node_modules}/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.colVis.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.flash.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.html5.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.print.js",
                            "{$config.path.node_modules}/datatables.net-colreorder/js/dataTables.colReorder.min.js",
                            "{$config.path.node_modules}/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
                            "{$config.path.node_modules}/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
                            "{$config.path.node_modules}/datatables.net-keytable/js/dataTables.keyTable.min.js",
                            "{$config.path.node_modules}/datatables.net-responsive/js/dataTables.responsive.min.js",
                            "{$config.path.node_modules}/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js",
                            "{$config.path.node_modules}/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
                            "{$config.path.node_modules}/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
                            "{$config.path.node_modules}/datatables.net-scroller/js/dataTables.scroller.min.js",
                            "{$config.path.node_modules}/datatables.net-select/js/dataTables.select.min.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.dist}/plugins/custom/datatables/datatables.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/datatables/datatables.bundle.js"
                    }
                },
                "jstree": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/jstree/dist/themes/default/style.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/jstree/dist/jstree.js"
                        ],
                        "images": [
                            "{$config.path.src}/media/plugins/jstree/32px.png",
                            "{$config.path.node_modules}/jstree/dist/themes/default/throbber.gif"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.dist}/plugins/custom/jstree/jstree.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/jstree/jstree.bundle.js",
                        "images": "{$config.dist}/plugins/custom/jstree"
                    }
                },
                "jqvmap": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/jqvmap/dist/jqvmap.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/jqvmap/dist/jquery.vmap.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.world.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.russia.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.usa.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.germany.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.europe.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.dist}/plugins/custom/jqvmap/jqvmap.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/jqvmap/jqvmap.bundle.js"
                    }
                },
                "uppy": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/uppy/dist/uppy.min.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/uppy/dist/uppy.min.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.dist}/plugins/custom/uppy/uppy.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/uppy/uppy.bundle.js"
                    }
                },
                "tinymce-js": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/tinymce/tinymce.min.js",
                            "{$config.path.node_modules}/tinymce/themes/silver/theme.js",
                            "{$config.path.node_modules}/tinymce/themes/mobile/theme.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.dist}/plugins/custom/tinymce/tinymce.bundle.js"
                    }
                },
                "tinymce": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/tinymce/skins/**/*.css"
                        ]
                    },
                    "output": {
                        "styles": "{$config.dist}/plugins/custom/tinymce/skins"
                    }
                },
                "tinymce-plugins": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/tinymce/plugins/**/*.js"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.dist}/plugins/custom/tinymce/plugins"
                    }
                },
                "tinymce-icons": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/tinymce/icons/**"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.dist}/plugins/custom/tinymce/icons"
                    }
                },
                "ckeditor-classic": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.dist}/plugins/custom/ckeditor/ckeditor-classic.bundle.js"
                    }
                },
                "ckeditor-inline": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/@ckeditor/ckeditor5-build-inline/build/ckeditor.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.dist}/plugins/custom/ckeditor/ckeditor-inline.bundle.js"
                    }
                },
                "ckeditor-balloon": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/@ckeditor/ckeditor5-build-balloon/build/ckeditor.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.dist}/plugins/custom/ckeditor/ckeditor-balloon.bundle.js"
                    }
                },
                "ckeditor-balloon-block": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/@ckeditor/ckeditor5-build-balloon-block/build/ckeditor.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.dist}/plugins/custom/ckeditor/ckeditor-balloon-block.bundle.js"
                    }
                },
                "ckeditor-decoupled-document": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.dist}/plugins/custom/ckeditor/ckeditor-document.bundle.js"
                    }
                },
                "jkanban": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/jkanban/dist/jkanban.min.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/jkanban/dist/jkanban.min.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.dist}/plugins/custom/kanban/kanban.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/kanban/kanban.bundle.js"
                    }
                },
                "leaflet": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/leaflet/dist/leaflet.css",
                            "{$config.path.node_modules}/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/leaflet/dist/leaflet.js",
                            "{$config.path.node_modules}/esri-leaflet/dist/esri-leaflet.js",
                            "{$config.path.node_modules}/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.dist}/plugins/custom/leaflet/leaflet.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/leaflet/leaflet.bundle.js"
                    }
                },
                "cropperjs": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/cropperjs/dist/cropper.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/cropperjs/dist/cropper.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.dist}/plugins/custom/cropper/cropper.bundle.css",
                        "scripts": "{$config.dist}/plugins/custom/cropper/cropper.bundle.js"
                    }
                }
            }
        },
        "pages": {
            "src": {
                "styles": [
                    "{$config.path.src}/sass/pages/**/*.scss"
                ],
                "scripts": [
                    "{$config.path.src}/js/pages/**/*.js"
                ]
            },
            "output": {
                "styles": "{$config.dist}/css/pages/",
                "scripts": "{$config.dist}/js/pages/"
            }
        },
        "theme": {
            "src": {
                "styles": [
                    "{$config.path.src}/sass/themes/**/*.scss"
                ]
            },
            "output": {
                "styles": "{$config.dist}/css/themes/"
            }
        },
        "media": {
            "src": {
                "media": [
                    "{$config.path.src}/media/**/*.*"
                ]
            },
            "output": {
                "media": "{$config.dist}/media/"
            }
        }
    }
}

Required Core CSS and JS files

Vendors list under build.vendors.base.src.mandatory is required, and the build.vendors.base.src.optional is optional. Also JS & CSS files in build.theme.base is required for specific demo styles and scripts.

Build Config
Field Type Description
config.debug boolean Enable/disable debug console log.
config.compile.rtl.enabled boolean Enable/disable compilation with RTL version of CSS along with default LTR CSS.
config.compile.rtl.skip array An array of plugin to be skipped from being compile as RTL.
config.compile.jsMinify boolean Enable/disable output Javascript minify.
config.compile.cssMinify boolean Enable/disable output CSS minify.
config.compile.jsSourcemaps boolean Enable/disable output Javascript with sourcemaps.
config.compile.cssSourcemaps boolean Enable/disable output CSS with sourcemaps.
config.dist object dist stands for distributable and refers to the directories where the minified and bundled assets will be stored for production uses.
Build Items
build.vendors.main object This object specifies required 3rd party resources to be added into the base css and js vendors bundles.
build.vendors.base object This object specifies global 3rd party resources to be added into the base css and js vendors bundles.
build.vendors.custom object This object specifies 3rd party resources.
build.theme.base object This object specifies the global assets of the demo to be added into the base css and js demo bundles.
build.theme.skins object This object specifies skins assets.
build.theme.pages object This object specifies custom assets that are included on demand.
build.media object Media folder.

Build Tasks

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

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

cd theme/tools/

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

yarn

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

gulp --demo1

If gulp command is not working, try to remove [keen]/theme/tools/node_modules folder, and reinstall dependencies using yarn.

Provide parameter --rtl=true to gulp task. This command disable from generating RTL CSS. If this param does not exist, by default RTL generate will be enabled.

gulp --rtl=true --demo1

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

gulp --js --demo1

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

gulp --sass --demo1

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

gulp --media --demo1

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

gulp --prod --demo1

The customization should be done from [keen]/theme/[demo]/src/. After compilation refer to the destination folder [keen]/theme/dist/.

This command use to start the real-time watcher. This task watches the sass/js files and automatically recompile whenever the source files are changed.

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

gulp watch --demo1

You also can run watcher separately for JS and SCSS.

gulp watch:js --demo1
gulp watch:scss --demo1

Localhost

Gulp-connect plugin use to run a simple webserver to run the HTML files.

Note that server side ajax examples are not supported using this webserver and for full functionality, please refer to online preview: https://keenthemes.com/keen/preview For the server side scripts demos, refer to the [keen]/docs/api_reference in the docs folder.

Open a console and run below command.

gulp localhost --demo1

Keep the console open. Open this link to run http://localhost:8080/

The default running port is 8080. In case, this port being used by other application, it can be changed in [keen]/theme/tools/gulp/watch.js

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