Аурелия - Связка

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

Шаг 1. Установка необходимых компонентов

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

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

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

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

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

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

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