はじめに
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 とかも対応してそう。
サンプルはここにおいておきます。