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.
Tidak ada komentar:
Posting Komentar