Aurelia - Bündelung

In diesem Kapitel erfahren Sie, wie Sie die Bündelung im Aurelia-Framework verwenden.

Schritt 1 - Installieren der Voraussetzungen

Sie können installieren aurelia-bundler durch Ausführen des folgenden Befehls in der command prompt.

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

Wenn Sie gulp nicht installiert haben, können Sie es installieren, indem Sie diesen Code ausführen.

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

Sie können auch installieren require-dir Paket von npm.

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

Schritt 2 - Ordner und Dateien erstellen

Zuerst erstellen gulpfile.js Datei im Stammverzeichnis der Apps.

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

Du wirst das brauchen buildOrdner. Fügen Sie in diesem Verzeichnis einen weiteren Ordner mit dem Namen hinzutasks.

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

Sie müssen erstellen bundle.js Datei im Inneren tasks Ordner.

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

Schritt 3 - Schlucken

Verwenden gulpals Task Runner. Sie müssen ihm mitteilen, dass der Code ausgeführt werden sollbuild\tasks\bundle.js.

gulpfile.js

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

Erstellen Sie nun die Aufgabe, die Sie benötigen. Diese Aufgabe wird die App übernehmen, erstellendist/appbuild.js und dist/vendor-build.jsDateien. Nach Abschluss des Bündelungsprozesses wird dieconfig.jsDatei wird ebenfalls aktualisiert. Sie können alle Dateien und Plugins einschließen, die Sie einfügen und minimieren möchten.

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

Das command prompt wird uns informieren, wenn die Bündelung abgeschlossen ist.