Bundling step by step instructions

Application Developer notes

5.8 Bundling step by step instructions

This set of instructions will guide you through setting up bundling in an Aurelia application where Kendo is used. Since there are multiple skeleton-navigation flavors out there, this tutorial will use the skeleton-typescript flavor, as that is a bit more involved example having to deal with type definition files in the bundling context. So if you want to follow this tutorial, download skeleton-typescript and follow these instructions to install Kendo and the aurelia-kendoui-bridge into the application.

The completed version of this tutorial can be found here and the application's README file covers bundling issues in even more details, so make sure to check that document.

1. Open build/bundles.js

2. Add the following bundle configuration (to get a Kendo bundle):

   "dist/kendo-build": {
      "includes": ["kendo-ui/js/*.min.js"],
      "excludes": [
        "[kendo-ui/js/angular.min.js]",
        "[kendo-ui/js/jquery.min.js]",
        "[kendo-ui/js/kendo.angular.min.js]",
        "[kendo-ui/js/kendo.angular2.min.js]",
        "[kendo-ui/js/kendo.spreadsheet.min.js]",
        "[kendo-ui/js/kendo.all.min.js]",
        "[kendo-ui/js/kendo.web.min.js]",
        "[kendo-ui/js/kendo.dataviz.min.js]",
        "[kendo-ui/js/kendo.dataviz.mobile.min.js]",
        "[kendo-ui/js/kendo.mobile.min.js]"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "rev": true
      }
    }

3. Modify the "dist/app-build" bundle configuration to include the files of the aurelia-kendoui-bridge:

    "dist/app-build": {
      "includes": [
        "[**/*.js]",
        "**/*.html!text",
        "**/*.css!text"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "depCache": true,
        "rev": false
      }
    }

   The bundles.js file should now look like this.

4. Run gulp bundle. This may take several minutes to complete

   

5. In order to run the app without gulp modifying the dist folder, we can use http-server. Run the following command to install it: npm install http-server -g

6. Now run http-server:

   

7. Open http://localhost:8080 in your browser and notice that significantly less files are loaded:

   

Important note

You can find this complete application as a companion document to this book. .