In this chapter, you will learn how to use bundling in Aurelia framework.

Step 1 – Installing Prerequisites

You can install aurelia-bundler by running the following command in the command prompt.

C:UsersusernameDesktopaureliaApp>npm install aurelia-bundler --save-dev

If you don”t have gulp installed, you can install it by running this code.

C:UsersusernameDesktopaureliaApp>npm install gulp

You can also install require-dir package from npm.

C:UsersusernameDesktopaureliaApp>npm install require-dir

Step 2 – Create Folders and Files

First, create gulpfile.js file in apps root directory.

C:UsersusernameDesktopaureliaApp>touch gulpfile.js

You will need the build folder. In this directory, add another folder named tasks.

C:UsersusernameDesktopaureliaApp>mkdir build
C:UsersusernameDesktopaureliaAppbuild>mkdir tasks

You need to create bundle.js file inside tasks folder.

C:UsersusernameDesktopaureliaAppbuildtasks>touch bundle.js

Step 3 – Gulp

Use gulp as the task runner. You need to tell it to run the code from buildtasksbundle.js.

gulpfile.js

require(''require-dir'')(''build/tasks'');

Now, create the task that you need. This task will take the app, create dist/appbuild.js and dist/vendor-build.js files. After the bundling process is complete, the config.js file will also be updated. You can include all files and plugins you want to inject and minify.

bundle.js

var gulp = require(''gulp'');
var bundle = require(''aurelia-bundler'').bundle;

var config = {
   force: true,
   baseURL: ''.'',
   configPath: ''./config.js'',
	
   bundles: {
      "dist/app-build": {
         includes: [
            ''[*.js]'',
            ''*.html!text'',
            ''*.css!text'',
         ],
         options: {
            inject: true,
            minify: true
         }
      },
		"dist/vendor-build": {
         includes: [
            ''aurelia-bootstrapper'',
            ''aurelia-fetch-client'',
            ''aurelia-router'',
            ''aurelia-animator-css'',
         ],
         options: {
            inject: true,
            minify: true
         }
      }
   }
};

gulp.task(''bundle'', function() {
   return bundle(config);
});  

The command prompt will inform us when bundling is complete.