Aurelia-bundlerを使ってファイルをバンドルする

Node.js,Express環境でAurelia.jsを動かしてみる–その2

前回の記事で（⇒Node.js,Express環境でAurelia.jsを動かしてみる–その1）ローカル環境にてAurelia.jsを動かすところまでできたと思います。

今回はExpressでサーバを作る前に、本番用のファイルを作成してみたいと思います。

ファイルのBundleをする(Aurelia Bundler)

参考⇒http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.0.7/doc/article/bundling-your-app-for-deploy

Aurelia.jsにはAurelia-bundlerというファイル結合アプリケーションがあるのでそれを使ってみます。
なぜファイルを結合するかというと「リクエスト数を減らすため」です。
リクエスト数をなぜ減らす必要があるのかはここでは説明しませんが、簡単に言うとブラウザで一度に扱えるリクエスト数が決まっているからです。ブラウザにより違いますが、一般的なブラウザだと2接続までです。

Aurelia.jsのページをChromeで開いて検証してみると私の環境では105リクエストもありました！
これをAurelia-bundlerを使うことで15リクエストまで抑えることができました。

aurelia-bundlerのインストール

aurelia-skeleton-navigationが設置されているディレクトリに移動して、aurelia-bundlerをインストール

npm install aurelia-bundler --save-dev

bundle.js(bundles.json)の設定方法

gulpのタスクとして下記ファイルが設置されているので中身を見てみます。

build/tasks/bundle.js

var gulp = require('gulp');
var bundler = require('aurelia-bundler');
var bundles = require('../bundles.json');

var config = {
  force: true,
  baseURL: '.',
  configPath: './config.js',
  bundles: bundles.bundles
};

gulp.task('bundle', ['unbundle', 'build'], function() {
  return bundler.bundle(config);
});

gulp.task('unbundle', function() {
  return bundler.unbundle(config);
});

上記ファイルには「bundle」と「unbundle」という二つのgulpタスクが記載されていて「gulp bundle」を実行するとconfigの中身を読みにいきます。
設定ファイルには下記ファイルが指定されています。

bundles.json

{
  "bundles": {
    "dist/app-build": {
      "includes": [
        "[*]",
        "*.html!text",
        "*.css!text"
      ],
      "options": {
        "inject": true,
        "minify": true
      }
    },
    "dist/aurelia": {
      "includes": [
        "aurelia-framework",
        "aurelia-bootstrapper",
        "aurelia-fetch-client",
        "aurelia-router",
        "aurelia-animator-css",
        "aurelia-templating-binding",
        "aurelia-templating-resources",
        "aurelia-templating-router",
        "aurelia-loader-default",
        "aurelia-history-browser",
        "aurelia-logging-console",
        "bootstrap",
        "bootstrap/css/bootstrap.css!text"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "rev": true
      }
    }
  }
}

簡単に解説すると　dist/app-build　と　dist/aurelia　の　includes　記載されているパッケージ・ファイルが圧縮されます。distフォルダ内に　app-build.js　と　aurelia-revision.js　が書き出されます。Defaultの設定では2つのファイルにしていますが一つのファイルにすることも可能です。

dist/aureliaではパッケージが設定されているというのがわかりやすいと思います。
dist/app-buildを少し解説します。

逆に除外したい場合は　excludes　を使用します。

excludes : [
   'app',
]

bundles.jsonを設定してgulp bundleしてみる

では実際にbundles.jsonを設定してみます。
といってもほぼ設定はされているのでちょっとだけ追記します。
aurelia-skeleton-navigationではgit userを表示するAPIを使用している箇所があるのですが、defaultの設定ではそのプラグインが抜けているのでたしてあげます。

	"fetch",

bundles.json全体

{
  "bundles": {
    "dist/app-build": {
      "includes": [
        "[*]",
        "*.html!text",
        "*.css!text"
      ],
      "options": {
        "inject": true,
        "minify": true
      }
    },
    "dist/aurelia": {
      "includes": [
        "aurelia-framework",
        "aurelia-bootstrapper",
        "aurelia-fetch-client",
        "aurelia-router",
        "aurelia-animator-css",
        "aurelia-templating-binding",
        "aurelia-templating-resources",
        "aurelia-templating-router",
        "aurelia-loader-default",
        "aurelia-history-browser",
        "aurelia-logging-console",
        "fetch",
        "bootstrap",
        "bootstrap/css/bootstrap.css!text"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "rev": true
      }
    }
  }
}

実行してみる

gulp bundle

distフォルダ内に新しく　app-build.js　と　aurelia-revisionnum.js　ができていたらここまでは成功です。　config.jsへの書き換え等も自動で行われます。
config.jsを除くとbundleの項目が新しくできていると思います。

gulp unbundle

画面表示に必要なファイル

下記ファイルだけでページが表示されるようになっているはずです。

system.js
config.js
index.html　system.js　config.js　aurelia-bootstrapper　の実行
app-build.js　　⇒gulp bundleで吐き出されたファイル
aurelia-revision.js　　⇒gulp bundleで吐き出されたファイル

おまけ：Importされているhtmlが含まれる場合

Polymer等を使ってhtmlをimportして使っている場合のbundle方法を紹介します。
別途別のプラグインが必要になります。

jspm install aurelia-html-import-template-loader

そして　src/main.js　に下記コードを追加。

aurelia.use.plugin('aurelia-html-import-template-loader')

main.js　変更後

import 'bootstrap';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.use.plugin('aurelia-html-import-template-loader')

  aurelia.start().then(a => a.setRoot());
}

上記プラグインを使用する場合の設定の例

"dist/view-bundle": {
  htmlimports: true,
  includes: 'dist/*.html',
  options: {
    inject: {
      indexFile : 'index.html',
      destFile : 'dest_index.html',
    }
  }
}

bundles.json全体

var gulp = require('gulp');
var bundle = require('aurelia-bundler').bundle;

var config = {
  force: true,
  packagePath: '.',
  bundles: {
    "dist/app-build": {
      includes: [
        '[*]'
      ],
      options: {
        inject: true,
        minify: true
      }
    },
    "dist/aurelia": {
      includes: [
        'aurelia-bootstrapper',
        'aurelia-fetch-client',
        'aurelia-router',
        'aurelia-animator-css',
        'github:aurelia/templating-binding',
        'github:aurelia/templating-resources',
        'github:aurelia/templating-router',
        'github:aurelia/loader-default',
        'github:aurelia/history-browser',
        'github:aurelia/logging-console'
      ],
      options: {
        inject: true,
        minify: true
      }
    },
    "dist/view-bundle": {
      htmlimport: true,
      includes: 'dist/*.html',
      options: {
        inject: {
          indexFile : 'index.html',
          destFile : 'dest_index.html'
        }
      }
    }
  }
};

新たにhtmlファイル群だけ別ファイルにしてバンドルされています。