Aurelia - Paquete

En este capítulo, aprenderá a utilizar la agrupación en el marco de Aurelia.

Paso 1: instalación de requisitos previos

Puedes instalar aurelia-bundler ejecutando el siguiente comando en el command prompt.

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

Si no tiene gulp instalado, puede instalarlo ejecutando este código.

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

También puedes instalar require-dir paquete de npm.

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

Paso 2: crear carpetas y archivos

Primero, crea gulpfile.js archivo en el directorio raíz de aplicaciones.

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

Necesitarás el buildcarpeta. En este directorio, agregue otra carpeta llamadatasks.

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

Necesitas crear bundle.js archivo dentro tasks carpeta.

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

Paso 3 - Gulp

Utilizar gulpcomo corredor de tareas. Necesitas decirle que ejecute el código desdebuild\tasks\bundle.js.

gulpfile.js

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

Ahora, cree la tarea que necesita. Esta tarea tomará la aplicación, crearádist/appbuild.js y dist/vendor-build.jsarchivos. Una vez finalizado el proceso de agrupación,config.jsEl archivo también se actualizará. Puede incluir todos los archivos y complementos que desee inyectar y minificar.

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

los command promptnos informará cuando se complete el paquete.