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



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を少し解説します。

[*]
distフォルダ内のjsファイルが対象
*.html!text
すべてのhtmlファイルが対象
*.css!text
すべてのcssファイルが対象

[*] 左記のように記述することで ./config.js の中で指定したフォルダに限定します。上記例ではconfig.jsにてdistフォルダが指定されている状態です。
* 左記のようにアスタリスク単体で使用すると範囲がすべてになります。
!text textプラグインを使用してロードする。

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

excludes : [
   'app',
]

optionについて

inject
trueにすることでconfig.jsに書き出されます。基本true。
minify
trueにするとソースが圧縮(minify)されます。
rev
trueだと生成されるjsファイルのファイル名にリヴィジョンナンバー(revision number)が追加されます。
force
trueにすると同名のファイルがあった場合上書きします。上書きしたくない場合はfalseで指定。
packagePath
package.jsonの場所を指定します。default設定では '.' 。aurelia-bundler実行時に config.js , baseURL , jspm_packages を見つけるのに使います。

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 watch や gulp build するとbundleが解除されるので注意
解除されてもconfig.jsにはbundleの情報が残っているのでbundleで生成されたファイルが無いよというエラーでページが起動しなくなります。
もし、作業等で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で吐き出されたファイル

index.html で system.js を呼び出しconfig.jsの設定に基づいてaurelia-bootstrapperが実行されています。
defaultではsystem.jsjspm_packagesの中にありますがほかに移植して使うこともできます。
そうすることでjspm_packagesフォルダを本番環境で作成しなくても稼動できるようになります。

おまけ: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ファイル群だけ別ファイルにしてバンドルされています。



Leave a comment

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