I am switching my SPA web app from Durandal to Aurelia and am now taking a look at the bundling process.
I use gulp to bundle the app and I followed the instructions on this Aurelia documentation page and other resources on the web. It works but there are some unclear things to me.
This is my gulpfile.js
var gulp = require('gulp'),
bundler = require('aurelia-bundler'),
uglify = require('gulp-uglify'),
htmlmin = require('gulp-htmlmin'),
del = require('del');
var config = {
force: true,
baseURL: '.', // baseURL of the application
configPath: './config.js', // config.js file. Must be within `baseURL`
bundles: {
"Scripts/build/app-build": { // bundle name/path. Must be within `baseURL`. Final path is: `baseURL/dist/app-build.js`.
includes: [
'[Scripts/app/**/*.js]',
'Scripts/app/**/*.html!text',
'Content/*.css!text'
],
options: {
inject: true,
minify: true,
depCache: true,
rev: true
}
},
"Scripts/build/vendor-build": {
includes: [
'jspm_packages/npm/babel-runtime@5.8.38/helpers/class-call-check.js',
'jspm_packages/npm/babel-runtime@5.8.38/helpers/create-class.js',
'jspm_packages/npm/babel-runtime@5.8.38/core-js/object/define-property.js',
'jspm_packages/npm/core-js@1.2.7/library/fn/object/define-property.js',
'jspm_packages/npm/babel-runtime@5.8.38/core-js/object/define-properties.js',
'jspm_packages/npm/core-js@1.2.7/library/fn/object/define-properties.js',
'npm:aurelia-framework@1.0.7',
'npm:aurelia-loader-default@1.0.0',
'npm:aurelia-logging-console@1.0.0',
'npm:aurelia-templating-binding@1.0.0',
'npm:aurelia-templating-resources@1.1.1',
'npm:aurelia-templating-router@1.0.0',
'npm:aurelia-knockout@1.0.2',
'npm:aurelia-history-browser@1.0.0',
'npm:aurelia-bootstrapper@1.0.0',
'npm:aurelia-fetch-client@1.0.1',
'npm:aurelia-router@1.0.6',
'npm:aurelia-animator-css@1.0.1',
'npm:babel-core@5.8.38',
'npm:babel-runtime@5.8.38',
'npm:core-js@1.2.7',
'github:systemjs/plugin-text@0.0.9'
],
options: {
inject: true,
minify: true,
depCache: true,
rev: true
}
}
}
};
gulp.task('build', ['minify'], function () {
return bundler.bundle(config);
});
And this is config.js
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"es7.decorators",
"es7.classProperties",
"runtime"
],
"compact": true
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
bundles: {
},
map: //some mappings
}
If I run the gulp task to bundle, it works, and I can load my app using the bundled files, but there are some things I don't understand:
After the bundled files are created, the config.js file is updated within the "bundles:" property with the files which have been created for the bundle, and a random versioning number (since I had set 'rev: true' in the options)
bundles: [
"Scripts/build/vendor-build-4c2789cace.js": [
//list of files
]
]
When I run the task again, maybe after some changes, the new bundled file has been added to the config.js file like that:
bundles: [
"Scripts/build/vendor-build-4c2789cace.js": [
//list of files
],
"Scripts/build/vendor-build-t67uj8e5f4.js": [
//list of files
]
]
but as you can see, the old one is still there. How do I tell him to "clear" the bundles property when I create a new bundle?