Blog

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.

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.

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

Next Topic : Click Here