はじめに

NodeJS のバージョンは v6.2.2 を使用しました。

Aurelia CLI のインストール

$ mkdir aurelia-cli-sample
$ cd aurelia-cli-sample/
$ npm install aurelia-cli -g
$ au -v
0.13.6

HELP の確認

$ au help
                      _ _          ____ _     ___
  __ _ _   _ _ __ ___| (_) __ _   / ___| |   |_ _|
 / _` | | | | '__/ _ \ | |/ _` | | |   | |    | |
| (_| | |_| | | |  __/ | | (_| | | |___| |___ | |
 \__,_|\__,_|_|  \___|_|_|\__,_|  \____|_____|___|

new <project-name> --here

    Creates a new Aurelia application project.

    project-name (optional) - The name to create the project with. If one isn't provided, the wizard will ask for one.

    --here - Creates a new project with the current working directory as the root of the project instead of creating a new project folder.

help

    Displays the Aurelia CLI help.

プロジェクト作成

ヘルプに表示れたコマンドでプロジェクトを作成してみます。
プロジェクト作成時に、Custom を選ぶと色々設定が選べてその内容でセットアップしてくれます。

$ au new aurelia-cli-sample --here
                      _ _          ____ _     ___
  __ _ _   _ _ __ ___| (_) __ _   / ___| |   |_ _|
 / _` | | | | '__/ _ \ | |/ _` | | |   | |    | |
| (_| | |_| | | |  __/ | | (_| | | |___| |___ | |
 \__,_|\__,_|_|  \___|_|_|\__,_|  \____|_____|___|


Would you like to use the default setup or customize your choices?

1. Default ESNext (Default)
   A basic web-oriented setup with Babel for modern JavaScript development.
2. Default TypeScript
   A basic web-oriented setup with TypeScript for modern JavaScript development.
3. Custom
   Select transpilers, CSS pre-processors and more.

> 3

What platform are you targeting?

1. Default (Default)
   The default web platform setup.
2. ASP.NET Core
   A powerful, patterns-based way to build dynamic websites with .NET.

> 1

What transpiler would you like to use?

1. Babel (Default)
   An open source, standards-compliant ES2015 and ESNext transpiler.
2. TypeScript
   An open source, ESNext superset that adds optional strong typing.

> 1

What css processor would you like to use?

1. None (Default)
   Use standard CSS with no pre-processor.
2. Less
   Extends the CSS language, adding features that allow variables, mixins, functions and many other techniques.
3. Sass
   A mature, stable, and powerful professional grade CSS extension.
4. Stylus
   Expressive, dynamic and robust CSS.
5. Post CSS
   A tool for transforming CSS with JavaScript.

> 3

Would you like to configure unit testing?

1. Yes (Default)
   Configure your app with Jasmine and Karma.
2. No
   Skip testing. My code is always perfect anyway.

> y

What is your default code editor?

1. Visual Studio Code (Default)
   Code editing. Redefined. Free. Open source. Runs everywhere.
2. Atom
   A hackable text editor for the 21st Century.
3. Sublime
   A sophisticated text editor for code, markup and prose.
4. WebStorm
   A lightweight yet powerful IDE, perfectly equipped for complex client-side development.

> 2

Project Configuration

    Name: aurelia-cli-sample
    Platform: Default
    Transpiler: Babel
    CSS Processor: Sass
    Unit Test Runner: Karma
    Editor: Atom


Would you like to create this project?

1. Yes (Default)
   Creates the project structure based on your selections.
2. Restart
   Restarts the wizard, allowing you to make different selections.
3. Abort
   Aborts the new project wizard.

> 1
Project structure created and configured.

Would you like to install the project dependencies?

1. Yes (Default)
   Installs all server, client and tooling dependencies needed to build the project.
2. No
   Completes the new project wizard without installing dependencies.

> 1

Installing project dependencies.

# こっから必要なモジュールのインストールが始まって、下記の表示が出たら完了

Congratulations! Your Project "aurelia-cli-sample" Has Been Created!


Now it's time for you to get started. It's easy. Simply run your new app with au run. Your app will run fully bundled. If you would like to have it auto-refresh whenever you make changes to your HTML, JavaScript or CSS, simply use the --watch flag. If you want to build your app for
production, run au build --env prod. That's just about all there is to it. If you need help, simply run au help.


Happy Coding!

プロジェクトフォルダ確認

--here オプションをつけたので、直下に必要なファイル類が作成されます。

$ ls -al
total 80
drwxr-xr-x   16 yutackall  staff    544  6 27 17:49 .
drwxr-xr-x    8 yutackall  staff    272  6 27 17:45 ..
-rw-r--r--    1 yutackall  staff    253  6 27 17:49 .babelrc
-rw-r--r--    1 yutackall  staff    264  6 27 17:49 .editorconfig
-rw-r--r--    1 yutackall  staff     63  6 27 17:49 .eslintrc.json
-rw-r--r--    1 yutackall  staff     29  6 27 17:49 .gitignore
drwxr-xr-x    6 yutackall  staff    204  6 27 17:49 aurelia_project
-rw-r--r--    1 yutackall  staff   4127  6 27 17:49 favicon.ico
-rw-r--r--    1 yutackall  staff    202  6 27 17:49 index.html
-rw-r--r--    1 yutackall  staff    996  6 27 17:49 karma.conf.js
drwxr-xr-x  673 yutackall  staff  22882  6 27 17:50 node_modules
-rw-r--r--    1 yutackall  staff   1594  6 27 17:49 package.json
drwxr-xr-x    4 yutackall  staff    136  6 27 17:49 scripts
drwxr-xr-x    7 yutackall  staff    238  6 27 17:49 src
drwxr-xr-x    4 yutackall  staff    136  6 27 17:49 test

`pakage.json` の中身

インストールされる Aurelia のバージョンは、1.0.0-rc1.0.0 みたいです。

package.json

{
  "name": "aurelia-cli-sample",
  "description": "An Aurelia client application.",
  "version": "0.1.0",
  "repository": {
    "type": "???",
    "url": "???"
  },
  "license": "MIT",
  "dependencies": {
    "aurelia-bootstrapper": "^1.0.0-rc.1.0.0",
    "aurelia-fetch-client": "^1.0.0-rc.1.0.0",
    "aurelia-animator-css": "^1.0.0-rc.1.0.0",
    "bluebird": "^3.4.1"
  },
  "peerDependencies": {},
  "devDependencies": {
    "aurelia-cli": "^0.13.0",
    "aurelia-testing": "^1.0.0-beta.1.0.0",
    "aurelia-tools": "^0.2.2",
    "browser-sync": "^2.13.0",
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-changed-in-place": "^2.0.3",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^2.0.0-alpha",
    "gulp-notify": "^2.2.0",
    "uglify-js": "^2.6.3",
    "minimatch": "^3.0.2",
    "through2": "^2.0.1",
    "babel-eslint": "^6.0.4",
    "babel-plugin-syntax-flow": "^6.8.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-amd": "^6.8.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
    "babel-plugin-transform-flow-strip-types": "^6.8.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-es2015-loose": "^7.0.0",
    "babel-preset-stage-1": "^6.5.0",
    "babel-polyfill": "^6.9.1",
    "babel-register": "^6.9.0",
    "gulp-babel": "^6.1.2",
    "gulp-eslint": "^2.0.0",
    "gulp-sass": "^2.3.2",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-babel-preprocessor": "^6.0.1"
  }
}

コマンド確認

最初の help では出てこなかったコマンド類が表示されます。

$ au help
                      _ _          ____ _     ___
  __ _ _   _ _ __ ___| (_) __ _   / ___| |   |_ _|
 / _` | | | | '__/ _ \ | |/ _` | | |   | |    | |
| (_| | |_| | | |  __/ | | (_| | | |___| |___ | |
 \__,_|\__,_|_|  \___|_|_|\__,_|  \____|_____|___|

build --env value

    Builds and processes all application assets.

    --env - Sets the build environment.

run --env value --watch

    Builds the application and serves up the assets via a local web server, watching files for changes as you work.

    --env - Sets the build environment.

    --watch - Watches source files for changes and refreshes the app automatically.

test --env value --watch

    Runs all unit tests and reports the results.

    --env - Sets the build environment.

    --watch - Watches test files for changes and re-runs the tests automatically.

generate generator-name

    Generates code for common use cases in Aurelia applications.

    generator-name - The name of the generator you want to run.

help

    Displays the Aurelia CLI help.

aurelia の起動

au run でサーバーが立ち上がり、ブラウザで確認できるようになります。
初期設定のままだと URL は http://localhost:9000

$ au run
Starting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'configureEnvironment'...
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildJavaScript'...
Finished 'buildJavaScript'
Starting 'writeBundles'...
Tracing app...
Tracing app...
Tracing text...
Tracing aurelia-dependency-injection...
Tracing aurelia-bootstrapper...
Tracing aurelia-binding...
Tracing aurelia-event-aggregator...
Tracing aurelia-framework...
Tracing aurelia-loader-default...
Tracing aurelia-history-browser...
Tracing aurelia-loader...
Tracing aurelia-history...
Tracing aurelia-metadata...
Tracing aurelia-pal...
Tracing aurelia-logging...
Tracing aurelia-polyfills...
Tracing aurelia-logging-console...
Tracing aurelia-pal-browser...
Tracing aurelia-path...
Tracing aurelia-route-recognizer...
Tracing aurelia-task-queue...
Tracing aurelia-templating...
Tracing aurelia-router...
Tracing aurelia-templating-binding...
Tracing aurelia-templating-router...
Tracing aurelia-templating-resources...
Tracing aurelia-testing...
Tracing environment...
Tracing main...
Tracing resources/index...
Writing app-bundle.js...
Writing vendor-bundle.js...
Finished 'writeBundles'
[BS] Access URLs:
 ----------------------------
 Local: http://localhost:9000
 ----------------------------
    UI: http://localhost:3001
 ----------------------------
[BS] Serving files from: .

実際のページ

`markup` を `Jade` に変えてみる

ソースを見てみると今後は markup も切り替えられるようになるみたいだけど、今はまだその機能がないので、自分で変えてみる

`gulp-jade` をインストール

$ npm install gulp-jade --save-dev

build task の変更

aurelia_project/tasks/process-markup.js

import gulp from 'gulp';
import jade from 'gulp-jade'                       // gulp-jade をインポート
import changedInPlace from 'gulp-changed-in-place';
import project from '../aurelia.json';
import {build} from 'aurelia-cli';

export default function processMarkup() {
  return gulp.src(project.markupProcessor.source)
    .pipe(jade())                                  // jade の処理を追加
    .pipe(changedInPlace({firstPass:true}))
    .pipe(build.bundle());
}

app.html を jade に変更

$ rm src/app.html
$ touch src/app.jade

src/app.jade

template
  h1 ${message}

aurelia.json の変更

jade ファイルがコンパイルの対象に含まれないので、markupProseccer の部分を下記のように書き換える

aurelia_project/aurelia.json

   "markupProcessor": {
     "id": "jade",
     "displayName": "Jade",
     "fileExtension": ".jade",
     "source": "src/**/*.jade"
   },

aurelia 起動

同じページが表示されれば問題なし

試してないけど同じ要領で、haml とか slim とかも出来ると思います
ただ、プロジェクトのトップの index.html まで jade に変えるのはめんどくさそうなので、やめときます。
基本いじらないし

page 追加

generate コマンドで下記が作れるみたいです。

$ au generate
                      _ _          ____ _     ___
  __ _ _   _ _ __ ___| (_) __ _   / ___| |   |_ _|
 / _` | | | | '__/ _ \ | |/ _` | | |   | |    | |
| (_| | |_| | | |  __/ | | (_| | | |___| |___ | |
 \__,_|\__,_|_|  \___|_|_|\__,_|  \____|_____|___|

No Generator Specified. Available Generators:

attribute

    Creates a custom attribute class and places it in the project resources.

binding-behavior

    Creates a binding behavior class and places it in the project resources.

element

    Creates a custom element class and template, placing them in the project resources.

generator

    Creates a generator class and places it in the project generators folder.

task

    Creates a task and places it in the project tasks folder.

value-converter

    Creates a value converter class and places it in the project resources.

今回は、ページを作るので element を作成します。

$ au generate element

What would you like to call the custom element?

> welcome   # ページ名を入力

作成されるファイルは下記になります。

src/resources/elements/welcome.html

<template>
  <h1>${value}</h1>
</template>

src/resources/elements/welcome.js

import {bindable} from 'aurelia-framework';

export class Welcome {
  @bindable value;

  valueChanged(newValue, oldValue) {

  }
}

`html` を、`jade` に置き換え

src/resources/elements/welcome.jade

template
  h1 ${message}

ついでに JS も修正

src/resources/elements/welcome.js

import {bindable} from 'aurelia-framework';

export class Welcome {
  @bindable value;

  constructor() {
    this.message = 'Welcome Page';
  }

  valueChanged(newValue, oldValue) {

  }
}

router 追加

Top ページを新しく追加 welcom に向けるため、app.js に router の記述を追加する。

src/app.js

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'welcome'], name: 'welcome', moduleId: './resources/elements/welcome', nav: true, title: 'Welcome' },
    ]);

    this.router = router;
  }
}

moduleId に welcome までの path を入れる。
このとき、.js はいらない。

このままだと、welcome ページは表示されないので、app.jade を下記のように書き換える。

app.jade

template
  .page-host
    router-view

この router-view の部分が、router に記載したページによって、書き換わります。

表示されたページ

所感

最初の Aurelia の公式ページの Getting Started とかもをやってみたんだけど、そもそもテンプレが用意された状態から始まるので、一から作る場合にどうやっていいかわからなかったところに、CLI のことを知って触ってみたところ、作り始めるには充分な機能があると思いました。

Aurelia 自体が RC 版公開されたばかりで、同じく CLI もまだまだ足りない機能はあるけど、issue のやり取りも盛んだし、かなり期待できそう。

正式版には、jade とかも対応してそう。

サンプルはここにおいておきます。