1.x tutorial bootstrap
Install を参照ください。
Beezには、複数のテンプレートプロジェクトが存在します。 今回は、チュートリアルとして最適なGithub検索のテンプレートを利用して、Webアプリケーションを構築します。
beez-projectで使用しているコマンドの説明は-hオプションを付けると詳しく見ることができます。
ここでは tutorial というプロジェクト名で、プロジェクトのディレクトリを~/Desktopに置くようにし、プロジェクトのタイプをgithubにしています。
$ beez-project -n tutorial -o ~/Desktop -b github
Create Project: tutorial
Project Directory: /Users/YOURNAME/Desktop/tutorial
Create File:
vendor # 各種ライブラリ ディレクトリ
beez.js
beez.min.js
zepto.js
zepto.min.js
underscore.js
underscore-min.js
backbone.localStorage.js
backbone.localStorage-min.js
backbone.js
backbone-min.js
handlebars.runtime.js
handlebars.runtime.min.js
require.js
require.min.js
.jsdoc.json
.jshintignore
.jshintrc
Gruntfile.js
package.json
build.local.js # ビルド設定ファイル require.js(r.js)
conf # Webアプリケーション設定ファイル ディレクトリ
local/
local.json
mockdata/
s # ソースコード ディレクトリ
index
search
===============================
Let me get started right away!!
Foundation Server Start
===============================
$ cd ~/Desktop/tutorial
$ npm install grunt-cli -g
$ npm install .
$ grunt foundation
---> Good luck to you :)
コンテンツ配信サーバーは、 port:1109 で listen されています。
通常はこちらにアクセスしてローカルで開発を行います。
詳細は、beez-foundation#wiki/1.x-StaticServer を見てください。
設定ファイル(mockdata)に定義したJSON情報を元に、様々なモックデータをREST配信する機能も併せ持ちます。
詳細は、beez-foundation#wiki/1.x-MockServer を見てください。
こちらはport:1121 で listen されています。
先程の作業で作成したプロジェクトのディレクトリに移動して、ローカル環境で開発用Webサーバーをbeez-foundationコマンドで起動します。
beez-foundationがローカルにインストールされている必要があります。
$ cd ~/Desktop/tutorial
$ grunt foundation
-e option not specified. Now -e local is used.
##
## Start
## Beez Foundation Servers!!
##
##
## Express server listening on port:1109
## Static Server start [ success ]
## compress: [on]
## Please try to access.
## http://0.0.0.0:1109
##
## Express server listening on port:1121
## Mock Server start [ success ]
## compress: [on]
## Please try to access.
## http://0.0.0.0:1121
##上記の表示が出たら、ローカルサーバーが無事起動しています。
ローカルサーバーにブラウザでアクセスします。ローカルではhttp://0.0.0.0:1109/m/PROJECTNAME/s/index/index.local.develop.htmlにアクセスすることでプロジェクトのトップページが見れるようになっています。
http://0.0.0.0:1109/m/tutorial/s/index/index.local.develop.html
- 単に
http://0.0.0.0:1109にアクセスするとbeez-foundationはファイルビューアとして動作します。コードやディレクトリの簡単な確認に使えて便利です。 - またこのTutorialでは出てきませんが、
beez-foundationコマンドでローカルサーバーを立ち上げると、buildやdeployといったコマンドもターミナルのコマンドラインからだけではなくこのファイルビューアーのCommand Operationから実行することができます。 - ローカルサーバーを起動したあとのターミナルにはそれぞれのリソースがどのようにアクセスされているかや、フロント側でエラーが発生した場合のログなどが表示されつづけるので、デバッグする際にこちらもブラウザ付属の 開発者ツール と同じように役立ちます。
GET /m/tutorial/s/index 304 21ms
GET /__beez_foundation__/style/bootstrap/bootstrap.min.css 304 9ms
GET /__beez_foundation__/style/bootstrap/bootstrap-responsive.min.css 304 6ms
GET /__beez_foundation__/js/vendor/zepto.min.js 304 6ms
GET /__beez_foundation__/js/vendor/underscore-min.js 304 5ms
GET /__beez_foundation__/js/vendor/suns.min.js 304 3ms
GET /__beez_foundation__/js/beez-lite.js 304 4ms
GET /__beez_foundation__/js/walk.js 304 3ms
GET /m/tutorial/s/index/index.html.hbs 304 1ms