Yeomanを使ってKnockoutのプロジェクトを作成する

今回は Yeoman、 Gulp、Karma を使ってKnockoutJSのプロジェクトを作成しようと思います。

元ネタは作者のブログのここの動画です。

Steve Sanderson - Architecting large Single Page Applications with Knockout.js on Vimeo

この動画の内容を今回のアドベントカレンダーで何回かに分けて紹介したいと思います。

下準備

まず yeoman を以下のコマンドでインストールします。

npm install -g yo

つぎに KnockoutJSを使ったプロジェクトを生成するために generator-ko を以下のコマンドでインストールします。

npm install -g generator-ko

基本これでOKですが、ローカルで簡単に確認するためのWebサーバがさくっと用意できない人も多いと思いますので、簡易Webサーバを用意しておきましょう。

つぎのコマンドでインストールします。（このWebサーバの起動方法は後述）

npm install -g http-server

Scaffolding

ではプロジェクトの雛形を生成します。このように雛形を生成することをScaffoldingと呼びます。

最初にプロジェクトのディレクトリを作成し、以下の yo コマンドを実行します。

mkdir TVGuide
cd TVGuide
yo ko 

すると以下のような画面になるので、気にせず全部エンターキーを押しましょう。

すると以下のような構造でファイルが作成されます。

プロジェクトの雛形が生成されたら、Webサーバを起動してブラウザで確認してみましょう。

以下のコマンドをプロジェクトの一番トップのディレクトリで実行します。

% pwd
/path/to/TVGuide    // プロジェクトの一番上のディレクトリ

% http-server src
Starting up http-server, serving src on: http://0.0.0.0:8080

ブラウザを開き以下のように表示されたら成功です。