Aurelia - Regroupement

Dans ce chapitre, vous apprendrez à utiliser le regroupement dans le framework Aurelia.

Étape 1 - Installation des prérequis

Vous pouvez installer aurelia-bundler en exécutant la commande suivante dans le command prompt.

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

Si vous n'avez pas installé gulp, vous pouvez l'installer en exécutant ce code.

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

Vous pouvez également installer require-dir paquet de npm.

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

Étape 2 - Créer des dossiers et des fichiers

Tout d'abord, créez gulpfile.js fichier dans le répertoire racine des applications.

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

Vous aurez besoin du builddossier. Dans ce répertoire, ajoutez un autre dossier nommétasks.

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

Vous devez créer bundle.js fichier à l'intérieur tasks dossier.

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

Étape 3 - Gulp

Utilisation gulpen tant que coureur de tâches. Vous devez lui dire d'exécuter le code à partir debuild\tasks\bundle.js.

gulpfile.js

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

Maintenant, créez la tâche dont vous avez besoin. Cette tâche prendra l'application, créerdist/appbuild.js et dist/vendor-build.jsdes dossiers. Une fois le processus de regroupement terminé, leconfig.jsLe fichier sera également mis à jour. Vous pouvez inclure tous les fichiers et plugins que vous souhaitez injecter et réduire.

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

le command prompt nous informera lorsque le regroupement sera terminé.