Учебники

Аурелия — Бандлинг

Январь 1, 2019

В этой главе вы узнаете, как использовать пакетирование в фреймворке Aurelia.

Шаг 1 — Установка предварительных условий

Вы можете установить aurelia-bundler , выполнив следующую команду в командной строке . 

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

Если у вас не установлен gulp, вы можете установить его, запустив этот код. 

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

Вы также можете установить пакет require-dir из npm . 

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

Шаг 2 — Создание папок и файлов

Сначала создайте файл gulpfile.js в корневом каталоге приложений. 

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

Вам понадобится папка сборки . В этом каталоге добавьте еще одну папку с именем задач . 

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

Вам нужно создать файл bundle.js внутри папки задач . 

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

Шаг 3 — Глоток

Используйте gulp в качестве бегуна задач. Вы должны указать ему запускать код из build \ tasks \ bundle.js .

gulpfile.js 

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

Теперь создайте задачу, которая вам нужна. Эта задача займет приложение, создаст файлы dist / appbuild.js и dist / vendor-build.js . После завершения процесса связывания файл config.js также будет обновлен. Вы можете включить все файлы и плагины, которые вы хотите внедрить и минимизировать.

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

Командная строка сообщит нам, когда комплектация будет завершена.

50
Share: