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をインストール

bash

npm install aurelia-bundler --save-dev

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

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

javascript

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の中身を読みにいきます。

css

{
  "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ではパッケージが設定されているというのがわかりやすいと思います。

[*]　左記のように記述することで　./config.js　の中で指定したフォルダに限定します。上記例ではconfig.jsにてdistフォルダが指定されている状態です。

*　左記のようにアスタリスク単体で使用すると範囲がすべてになります。

text

excludes : [
   'app',
]

optionについて

trueにすることでconfig.jsに書き出されます。基本true。

trueだと生成されるjsファイルのファイル名にリヴィジョンナンバー(revision number)が追加されます。

trueにすると同名のファイルがあった場合上書きします。上書きしたくない場合はfalseで指定。

package.jsonの場所を指定します。default設定では　'.'　。aurelia-bundler実行時に　config.js　,　baseURL　,　jspm_packages　を見つけるのに使います。

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

aurelia-skeleton-navigationではgit userを表示するAPIを使用している箇所があるのですが、defaultの設定ではそのプラグインが抜けているのでたしてあげます。

text

"fetch",

css

{
  "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
      }
    }
  }
}

text

gulp bundle

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

config.jsを除くとbundleの項目が新しくできていると思います。

※注意　gulp watch　や gulp build　するとbundleが解除されるので注意

解除されてもconfig.jsにはbundleの情報が残っているのでbundleで生成されたファイルが無いよというエラーでページが起動しなくなります。

もし、作業等でbundleを解除したい場合は下記を実行しましょう。

text

gulp unbundle

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

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

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.jsはjspm_packagesの中にありますがほかに移植して使うこともできます。

そうすることでjspm_packagesフォルダを本番環境で作成しなくても稼動できるようになります。

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

Polymer等を使ってhtmlをimportして使っている場合のbundle方法を紹介します。

javascript

jspm install aurelia-html-import-template-loader

javascript

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

javascript

import 'bootstrap';

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

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

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

javascript

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

javascript

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

📦

Amazon で関連書籍・ツールを検索

Web開発プログラミング入門

Amazonで探す →（アソシエイトリンク）