Aurelia – Bundling

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.

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.

Aurelia - Bundling

Debugging

In this chapter, you will learn how to add Aurelia context debugger as a chrome extension.

Note − Before adding the extension, you need to have aurelia-tools files. If you don’t have it, you can check Tools chapter.

Step 1 – Open Chrome Extensions

The easiest way to open chrome extensions is to run the following code in browser’s URL bar.

chrome://extensions

Step 2 – Add Extension

Since this extension isn’t yet available from Chrome store, check developermode checkbox and click Load Unpacked Extensions. This will open a small window where you can choose the extension to add.

For this example, let us choose Desktop/aurelia-projects/tools/context-debugger folder and open it.

Now, we can see that the extension is loaded in the browser.

Aurelia - Debugging

We can also check the developers console. When we click elements tab, we will see aurelia-properties at the bottom right corner.

Aurelia - Debugging

Next Topic : Click Here

Leave a Reply