Aurelia - Bundling

In questo capitolo imparerai come usare il bundling nel framework Aurelia.

Passaggio 1: installazione dei prerequisiti

Puoi installare aurelia-bundler eseguendo il seguente comando nel file command prompt.

C:\Users\username\Desktop\aureliaApp>npm install aurelia-bundler --save-dev

Se non hai installato gulp, puoi installarlo eseguendo questo codice.

C:\Users\username\Desktop\aureliaApp>npm install gulp

Puoi anche installare require-dir pacchetto da npm.

C:\Users\username\Desktop\aureliaApp>npm install require-dir

Passaggio 2: creare cartelle e file

Per prima cosa, crea gulpfile.js file nella directory principale delle app.

C:\Users\username\Desktop\aureliaApp>touch gulpfile.js

Avrai bisogno del file buildcartella. In questa directory, aggiungi un'altra cartella denominatatasks.

C:\Users\username\Desktop\aureliaApp>mkdir build
C:\Users\username\Desktop\aureliaApp\build>mkdir tasks

Devi creare bundle.js file all'interno tasks cartella.

C:\Users\username\Desktop\aureliaApp\build\tasks>touch bundle.js

Passaggio 3 - Gulp

Uso gulpcome task runner. Devi dirgli di eseguire il codice dabuild\tasks\bundle.js.

gulpfile.js

require('require-dir')('build/tasks');

Ora, crea l'attività di cui hai bisogno. Questa attività prenderà l'app, creadist/appbuild.js e dist/vendor-build.jsFile. Al termine del processo di raggruppamento, il fileconfig.jsverrà aggiornato anche il file. Puoi includere tutti i file e i plugin che desideri iniettare e minimizzare.

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);
});

Il command promptci informerà quando il raggruppamento è completo.