Aurelia - Pacote

Neste capítulo, você aprenderá como usar empacotamento no framework Aurelia.

Etapa 1 - Pré-requisitos de instalação

Você pode instalar aurelia-bundler executando o seguinte comando no command prompt.

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

Se você não tem o gulp instalado, pode instalá-lo executando este código.

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

Você também pode instalar require-dir pacote de npm.

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

Etapa 2 - Criar pastas e arquivos

Primeiro, crie gulpfile.js arquivo no diretório raiz de aplicativos.

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

Você vai precisar do buildpasta. Neste diretório, adicione outra pasta chamadatasks.

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

Você precisa criar bundle.js arquivo dentro tasks pasta.

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

Passo 3 - Gulp

Usar gulpcomo o executor de tarefas. Você precisa dizer a ele para executar o código debuild\tasks\bundle.js.

gulpfile.js

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

Agora, crie a tarefa de que você precisa. Esta tarefa levará o aplicativo, criardist/appbuild.js e dist/vendor-build.jsarquivos. Após a conclusão do processo de empacotamento, oconfig.jsarquivo também será atualizado. Você pode incluir todos os arquivos e plug-ins que deseja injetar e 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);
});

o command promptnos informará quando o empacotamento for concluído.