アウレリア-バンドリング

この章では、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

*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]',
            '*l!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);
});

バンドルが完了すると、*コマンドプロンプト*から通知されます。

Aurelia Bundling CMD

Aurelia-bundling

目次