(my) Best Practices for Aurelia - Bundling and Minification

Note: This post is from April 2015, there are some updated options available

We get a lot of questions in the official Aurelia gitter regarding some basic best practices so I wanted to share a few quick thoughts and examples that are my own -

Bundling and minification

Bundling and minification is now attainable fairly simply. We are building this directly into the aurelia-cli but until that is released this is what you need for now.

Requirements
  1. Understand that a jspm bundle command is used to let system.js, our module loader, know to load the bundle

  2. Understand this only covers the JavaScript files (for now)

Create a new bundle
  1. Open your terminal and navigate to your skeleton-navigation folder.
  2. Open your config.js in your text editor
  3. Change the "*": "*.js" path to
    "*": "dist/*.js"
  4. Run this command -
jspm bundle '*' + aurelia-bootstrapper + aurelia-http-client + aurelia-dependency-injection + aurelia-router app-bundle.js --inject --minify  
Breakdown
// Create a bundle
jspm bundle  
    // Bundle all of these paths
    // from my config.js 
    '*' +
    aurelia-bootstrapper +
    aurelia-http-client + 
    aurelia-dependency-injection + 
    aurelia-router

    // Create the bundle here
    // with this name
    dist/app-bundle.js

    // These modifiers tell the bundle
    // to both minify and then inject
    // the bundle
    --inject
    --minify
Additional notes on bundling
  1. If you are serving in production you may want to look at setting baseUrl in your config.js like that
  2. To unbundle and serve files individually use jspm unbundle
  3. Since we used the --inject modifier system.js should pick up on our bundle and serve it without changing our script path in index.html.