Premium Bootstrap Admin Templates

Keen - The Ultimate Multi-Demo Bootstrap Admin Theme

The most complete UI/UX template solution for today's web projects of any size

Build Tools

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 default.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]/theme/default/tools/conf/default.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": [
          "socicon",
          "line-awesome",
          "flaticon",
          "flaticon2",
          "fontawesome5",
          "owl.carousel",
          "fullcalendar",
          "bootstrap-datepicker",
          "bootstrap-datetime-picker",
          "nouislider"
        ]
      },
      "jsUglify": false,
      "cssMinify": false,
      "jsSourcemaps": false,
      "cssSourcemaps": false
    },
    "path": {
      "src": "./../themes/themes/keen/src",
      "node_modules": "./../themes/themes/keen/tools/node_modules",
      "core_framework": "./../themes/framework",
      "demo_api_url": "https://keenthemes.com/keen/themes/themes/keen/dist/preview/"
    },
    "dist": [
      "./../themes/themes/keen/dist/preview/assets",
      "./../themes/themes/keen/dist/default/**/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"
              ]
            },
            "sticky-js": {
              "scripts": [
                "{$config.path.node_modules}/sticky-js/dist/sticky.min.js"
              ]
            },
            "wnumb": {
              "scripts": [
                "{$config.path.node_modules}/wnumb/wNumb.js"
              ]
            }
          },
          "optional": {
            "jquery-form": {
              "scripts": [
                "{$config.path.node_modules}/jquery-form/dist/jquery.form.min.js"
              ]
            },
            "tether": {
              "styles": [
                "{$config.path.node_modules}/tether/dist/css/tether.css"
              ],
              "scripts": []
            },
            "block-ui": {
              "scripts": [
                "{$config.path.node_modules}/block-ui/jquery.blockUI.js"
              ]
            },
            "bootstrap-datepicker": {
              "styles": [
                "{$config.path.node_modules}/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
                "{$config.path.core_framework}/components/vendors/bootstrap-datepicker/init.js"
              ]
            },
            "bootstrap-datetime-picker": {
              "styles": [
                "{$config.path.node_modules}/bootstrap-datetime-picker/css/bootstrap-datetimepicker.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js"
              ]
            },
            "bootstrap-timepicker": {
              "styles": [
                "{$config.path.node_modules}/bootstrap-timepicker/css/bootstrap-timepicker.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
                "{$config.path.core_framework}/components/vendors/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.core_framework}/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"
              ]
            },
            "typeahead.js": {
              "scripts": [
                "{$config.path.node_modules}/typeahead.js/dist/typeahead.bundle.js",
                "{$config.path.node_modules}/handlebars/dist/handlebars.js"
              ]
            },
            "inputmask": {
              "scripts": [
                "{$config.path.node_modules}/inputmask/dist/jquery.inputmask.bundle.js",
                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.date.extensions.js",
                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.numeric.extensions.js"
              ]
            },
            "nouislider": {
              "styles": [
                "{$config.path.node_modules}/nouislider/distribute/nouislider.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/nouislider/distribute/nouislider.js"
              ]
            },
            "owl.carousel": {
              "styles": [
                "{$config.path.node_modules}/owl.carousel/dist/assets/owl.carousel.css",
                "{$config.path.node_modules}/owl.carousel/dist/assets/owl.theme.default.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/owl.carousel/dist/owl.carousel.js"
              ],
              "images": [
                "{$config.path.node_modules}/owl.carousel/dist/assets/owl.video.play.png",
                "{$config.path.node_modules}/owl.carousel/dist/assets/ajax-loader.gif"
              ]
            },
            "autosize": {
              "scripts": [
                "{$config.path.node_modules}/autosize/dist/autosize.js"
              ]
            },
            "clipboard": {
              "scripts": [
                "{$config.path.node_modules}/clipboard/dist/clipboard.min.js"
              ]
            },
            "dropzone": {
              "styles": [
                "{$config.path.node_modules}/dropzone/dist/dropzone.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/dropzone/dist/dropzone.js"
              ]
            },
            "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.core_framework}/components/vendors/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.core_framework}/components/vendors/jquery-validation/init.js"
              ]
            },
            "animate.css": {
              "styles": [
                "{$config.path.node_modules}/animate.css/animate.css"
              ]
            },
            "toastr": {
              "styles": [
                "{$config.path.node_modules}/toastr/build/toastr.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/toastr/build/toastr.min.js"
              ]
            },
            "morris.js": {
              "styles": [
                "{$config.path.node_modules}/morris.js/morris.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/raphael/raphael.js",
                "{$config.path.node_modules}/morris.js/morris.js"
              ]
            },
            "chart.js": {
              "scripts": [
                "{$config.path.node_modules}/chart.js/dist/Chart.bundle.js"
              ]
            },
            "bootstrap-session-timeout": {
              "scripts": [
                "{$config.path.core_framework}/vendors/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js"
              ]
            },
            "jquery-idletimer": {
              "scripts": [
                "{$config.path.core_framework}/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.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/es6-promise-polyfill/promise.min.js",
                "{$config.path.node_modules}/sweetalert2/dist/sweetalert2.min.js",
                "{$config.path.core_framework}/components/vendors/sweetalert2/init.js"
              ]
            },
            "jquery.repeater": {
              "scripts": [
                "{$config.path.node_modules}/jquery.repeater/src/lib.js",
                "{$config.path.node_modules}/jquery.repeater/src/jquery.input.js",
                "{$config.path.node_modules}/jquery.repeater/src/repeater.js"
              ]
            },
            "socicon": {
              "styles": [
                "{$config.path.node_modules}/socicon/css/socicon.css"
              ],
              "fonts": [
                "{$config.path.node_modules}/socicon/font/**"
              ]
            },
            "dompurify": {
              "scripts": [
                "{$config.path.node_modules}/dompurify/dist/purify.js"
              ]
            },
            "line-awesome": {
              "styles": [
                "{$config.path.core_framework}/vendors/line-awesome/css/line-awesome.css"
              ],
              "fonts": [
                "{$config.path.core_framework}/vendors/line-awesome/fonts/**"
              ]
            },
            "flaticon": {
              "styles": [
                "{$config.path.core_framework}/vendors/flaticon/flaticon.css"
              ],
              "fonts": [
                "{$config.path.core_framework}/vendors/flaticon/font/**"
              ]
            },
            "flaticon2": {
              "styles": [
                "{$config.path.core_framework}/vendors/flaticon2/flaticon.css"
              ],
              "fonts": [
                "{$config.path.core_framework}/vendors/flaticon2/font/**"
              ]
            },
            "fontawesome5": {
              "styles": [
                "{$config.path.core_framework}/vendors/fontawesome5/css/all.min.css"
              ],
              "fonts": [
                "{$config.path.core_framework}/vendors/fontawesome5/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.core_framework}/vendors/jquery-ui/jquery-ui.min.css"
            ],
            "scripts": [
              "{$config.path.core_framework}/vendors/jquery-ui/jquery-ui.min.js"
            ],
            "images": [
              "{$config.path.core_framework}/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"
          }
        },
        "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.core_framework}/components/vendors/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": {
            "media": [
              "{$config.path.src}/theme/demo/default/media/**/*.*"
            ],
            "styles": [
              "{$config.path.src}/theme/demo/default/sass/style.scss"
            ],
            "scripts": [
              "{$config.path.core_framework}/lib/util.js",
              "{$config.path.core_framework}/lib/app.js",
              "{$config.path.core_framework}/components/foundation/**/*.js",
              "{$config.path.src}/theme/framework/components/base/**/*.js",
              "{$config.path.src}/theme/demo/default/scripts/bundle/layout.js",
              "{$config.path.src}/theme/demo/default/scripts/bundle/aside-secondary.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/default/base/style.bundle.css",
            "scripts": "{$config.output}/demo/default/base/scripts.bundle.js"
          },
          "output": {
            "media": "{$config.output}/demo/default/media"
          }
        },
        "skins": {
          "header": {
            "src": {
              "styles": [
                "{$config.path.src}/theme/demo/default/sass/header/skins/**/*.scss"
              ]
            },
            "output": {
              "styles": "{$config.output}/demo/default/skins/header/"
            }
          },
          "brand": {
            "src": {
              "styles": [
                "{$config.path.src}/theme/demo/default/sass/brand/skins/**/*.scss"
              ]
            },
            "output": {
              "styles": "{$config.output}/demo/default/skins/brand/"
            }
          },
          "aside": {
            "src": {
              "styles": [
                "{$config.path.src}/theme/demo/default/sass/aside/skins/**/*.scss"
              ]
            },
            "output": {
              "styles": "{$config.output}/demo/default/skins/aside/"
            }
          }
        }
      },
      "demo2": {
        "base": {
          "src": {
            "media": [
              "{$config.path.src}/theme/demo/demo2/media/**/*.*"
            ],
            "styles": [
              "{$config.path.src}/theme/demo/demo2/sass/style.scss"
            ],
            "scripts": [
              "{$config.path.core_framework}/lib/util.js",
              "{$config.path.core_framework}/lib/app.js",
              "{$config.path.core_framework}/components/foundation/**/*.js",
              "{$config.path.src}/theme/framework/components/base/**/*.js",
              "{$config.path.src}/theme/demo/demo2/scripts/bundle/layout.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/demo2/base/style.bundle.css",
            "scripts": "{$config.output}/demo/demo2/base/scripts.bundle.js"
          },
          "output": {
            "media": "{$config.output}/demo/demo2/media"
          }
        },
        "skins": {
          "src": {
            "styles": [
              "{$config.path.src}/theme/demo/demo2/sass/aside/skins/**/*.scss"
            ]
          },
          "output": {
            "styles": "{$config.output}/demo/demo2/skins/aside/"
          }
        }
      },
      "demo3": {
        "base": {
          "src": {
            "media": [
              "{$config.path.src}/theme/demo/demo3/media/**/*.*"
            ],
            "styles": [
              "{$config.path.src}/theme/demo/demo3/sass/style.scss"
            ],
            "scripts": [
              "{$config.path.core_framework}/lib/util.js",
              "{$config.path.core_framework}/lib/app.js",
              "{$config.path.core_framework}/components/foundation/**/*.js",
              "{$config.path.src}/theme/framework/components/base/**/*.js",
              "{$config.path.src}/theme/demo/demo3/scripts/bundle/layout.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/demo3/base/style.bundle.css",
            "scripts": "{$config.output}/demo/demo3/base/scripts.bundle.js"
          },
          "output": {
            "media": "{$config.output}/demo/demo3/media"
          }
        }
      },
      "demo4": {
        "base": {
          "src": {
            "media": [
              "{$config.path.src}/theme/demo/demo4/media/**/*.*"
            ],
            "styles": [
              "{$config.path.src}/theme/demo/demo4/sass/style.scss"
            ],
            "scripts": [
              "{$config.path.core_framework}/lib/util.js",
              "{$config.path.core_framework}/lib/app.js",
              "{$config.path.core_framework}/components/foundation/**/*.js",
              "{$config.path.src}/theme/framework/components/base/**/*.js",
              "{$config.path.src}/theme/demo/demo4/scripts/bundle/layout.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/demo4/base/style.bundle.css",
            "scripts": "{$config.output}/demo/demo4/base/scripts.bundle.js"
          },
          "output": {
            "media": "{$config.output}/demo/demo4/media"
          }
        }
      },
      "demo5": {
        "base": {
          "src": {
            "media": [
              "{$config.path.src}/theme/demo/demo5/media/**/*.*"
            ],
            "styles": [
              "{$config.path.src}/theme/demo/demo5/sass/style.scss"
            ],
            "scripts": [
              "{$config.path.core_framework}/lib/util.js",
              "{$config.path.core_framework}/lib/app.js",
              "{$config.path.core_framework}/components/foundation/**/*.js",
              "{$config.path.src}/theme/framework/components/base/**/*.js",
              "{$config.path.src}/theme/demo/demo5/scripts/bundle/layout.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/demo5/base/style.bundle.css",
            "scripts": "{$config.output}/demo/demo5/base/scripts.bundle.js"
          },
          "output": {
            "media": "{$config.output}/demo/demo5/media"
          }
        },
        "skins": {
          "src": {
            "styles": [
              "{$config.path.src}/theme/demo/demo5/sass/header/skins/**/*.scss"
            ]
          },
          "output": {
            "styles": "{$config.output}/demo/demo5/skins/header/"
          }
        }
      },
      "demo6": {
        "base": {
          "src": {
            "media": [
              "{$config.path.src}/theme/demo/demo6/media/**/*.*"
            ],
            "styles": [
              "{$config.path.src}/theme/demo/demo6/sass/style.scss"
            ],
            "scripts": [
              "{$config.path.core_framework}/lib/util.js",
              "{$config.path.core_framework}/lib/app.js",
              "{$config.path.core_framework}/components/foundation/**/*.js",
              "{$config.path.src}/theme/framework/components/base/**/*.js",
              "{$config.path.src}/theme/demo/demo6/scripts/bundle/layout.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/demo6/base/style.bundle.css",
            "scripts": "{$config.output}/demo/demo6/base/scripts.bundle.js"
          },
          "output": {
            "media": "{$config.output}/demo/demo6/media"
          }
        },
        "skins": {
          "src": {
            "styles": [
              "{$config.path.src}/theme/demo/demo6/sass/aside/skins/**/*.scss"
            ]
          },
          "output": {
            "styles": "{$config.output}/demo/demo6/skins/aside/"
          }
        }
      }
    },
    "app": {
      "custom": {
        "src": {
          "styles-by-demo": [
            "{$config.path.src}/theme/app/custom/**/*.scss"
          ],
          "scripts": [
            "{$config.path.src}/theme/app/custom/**/*.js"
          ],
          "media": [
            "{$config.path.src}/media/**/*.*"
          ]
        },
        "output": {
          "styles-by-demo": "{$config.output}/app/custom/",
          "scripts": "{$config.output}/app/custom/",
          "media": "{$config.output}/media/"
        }
      },
      "bundle": {
        "src": {
          "scripts": [
            "{$config.path.src}/theme/app/bundle/**/*.js"
          ]
        },
        "bundle": {
          "scripts": "{$config.output}/app/bundle/app.bundle.js"
        }
      }
    }
  }
}

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.

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 `[root]/theme/default/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 included 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 included on demand from `assets/demo/default/custom/` folder
`build.app`	`object`	This object specifies application level global assets that are included 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.

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]/theme/default/tools/

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

yarn

After every modification in [root]/theme/default/src/, run below task to compile the assets as defined in [root]/theme/default/tools/conf/default.json :

gulp

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

The command gulp apiurl is an optional gulp task for demo purpose. It does set all the demo backend URL to point to demo API server. For example in the source code, some demo is set as relative URL. By using this command, all the demo URL will be converted to absolute URL. The demo URL is set in the [root]/theme/default/tools/package.json file in config.path.demo_api_url.

gulp apiurl

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

gulp --rtl=false

Provide parameter --demo to gulp task. This command will generate assets based on the selected demo only.

gulp --demo=demo2

The param allow multiple demos separated by comma.

gulp --demo=demo2,demo5,demo7

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

gulp --prod

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

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

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

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

gulp watch

You also can run watcher separately for JS and SCSS.

gulp watch:js

gulp watch:scss

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 [root]/docs/api_reference in the docs folder.

Open a console and run below command.

gulp localhost

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

Keen’s Key Features

Keen empowers your project with virtually limitless array of options
to create endless unique projects.

Based On Bootstrap 4.x
Multi-Demo Concept
Enterprise Ready Architect
Integrated Build Tools: Gulp, NPM, Yarn, SASS
Full RTL Support
Included Classic(without build tool) Version
Enterprise Ready Core Framework
Full SASS Support
Re-Usable Component System
And many more...