Aurelia - Bundling

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:\Users\username\Desktop\aureliaApp>npm install aurelia-bundler --save-dev

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

C:\Users\username\Desktop\aureliaApp>npm install gulp

You can also install require-dir package from npm.

C:\Users\username\Desktop\aureliaApp>npm install require-dir

Step 2 - Create Folders and Files

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

C:\Users\username\Desktop\aureliaApp>touch gulpfile.js

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

C:\Users\username\Desktop\aureliaApp>mkdir build
C:\Users\username\Desktop\aureliaApp\build>mkdir tasks

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

C:\Users\username\Desktop\aureliaApp\build\tasks>touch bundle.js

Step 3 - Gulp

Use gulp as the task runner. You need to tell it to run the code from build\tasks\bundle.js.



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.


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

var config = {
   force: true,
   baseURL: '.',
   configPath: './config.js',
   bundles: {
      "dist/app-build": {
         includes: [
         options: {
            inject: true,
            minify: true
		"dist/vendor-build": {
         includes: [
         options: {
            inject: true,
            minify: true

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

The command prompt will inform us when bundling is complete.

Aurelia Bundling CMD