Aurelia - Bundling

Step 1 - Installing Prerequisites

We can install aurelia-bundler by running the following command in 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

And we will also install require-dir package from npm.

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

Step 2 - Create Folders and Files

First let's create gulpfile.js file in apps root directory.

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

We will also need build folder. In this directory we will add another folder named tasks.

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

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

And we need to create bundle.js file inside tasks folder.

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

Step 3 - Gulp

We will use gulp as our task runner. We need to tell it to run the code from build\tasks\bundle.js.

gulpfile.js

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

Now let's create the task that we need. This task will take our app, create dist/app-build.js and dist/vendor-build.js files. After bundling process is finished, the config.js file will also be updated. We can include all files and plugins we 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 finished.