Yeomanを使ったAngularJSアプリをチームで共同開発して公開するまで

# Yeomanって何？
フロントの開発に必要なツール郡です。主な機能として、

1. プロジェクトの雛形の作成 (yo)
2. 依存するライブラリの管理 (bower)
3. altJSのコンパイル、css/jsファイルのminify、画像の圧縮などタスク実行(grunt)

が行えます。詳しくは下記サイトの「Yeoman(ヨーマン)とは」がとても参考になると思います。

参照：[[Grunt]Yeomanで開発ワークフローを楽にしよう[bower] ｜ Developers.IO](http://dev.classmethod.jp/etc/yeoman/)

# node.jsのインストール
Yeomanはnpmからインストールするため、node.jsをあらかじめインストールしておく必要があります。

## mac
macでのインストールはhomebrewがおすすめです。

MacOSX 10.9にhomebrewをインストールする場合、下記の記事を参考にしてください。
参照：[Python - MacOSX Mavericks(10.9)にhomebrewを使ってDjangoの開発環境を整える - Qiita [キータ]](http://qiita.com/tetsuya/items/f9a01d6bdea9639aff26)


brewのインストールが完了したら、node.jsのインストールを行います。

```
$ brew install node
```

brewコマンドでnode.jsをインストールするとnpmも一緒にインストールしてくれます。

```
$ brew install npm
Warning: node-0.10.24 already installed
```

## windows
下記URLから、環境に合わせたインストーラをダウンロードし、インストールを行います。
[Download - Node.js](http://nodejs.org/download/)

exeファイルを実行するとnode.jsおよびnpmのインストールが完了します。

## インストールの確認
node.jsおよびnpmがインストールされた事を確認しましょう。

```
$ node -v
v0.10.24

$ npm -v
1.3.21
```

これでYeomanをインストールするための環境が整いました。

# Yeomanのインストール
```
$ npm install -g yo
```

これでYeomanのインストールは完了です。

# AngularJS用のYeomanジェネレータのインストール
前述の通り、Yeomanは雛形の作成が行えます。ここでは、AngularJS用の雛形を作成するためのジェネレータをインストールします。

```
$ npm install -g generator-angular
```

Yeomanでは、Backbone.js用のジェネレータや、Chrome Extensionsを作成するためのジェネレータも用意されています。また、サードパーティ製のgeneratorも数多くあるようです。

# AngularJSアプリの作成
```
$ mkdir firstapp
$ cd firstapp
$ yo angular
```

# Gruntサーバ起動の確認
Gruntのタスクは、yoで自動生成されたGruntfile.jsに定義されています。その中には、静的サーバを立ち上げるタスクの記述もされています。

```
$ grunt serve
```

しばらくするとブラウザが立ち上がり、以下のような画面が表示されます。これで、Yeomanのインストールは完了です。

![firstapp](https://qiita-image-store.s3.amazonaws.com/0/2624/e8884a4c-7d49-3f09-4c64-bd0cb8a4f821.png "firstapp")

# AngularJSアプリの拡張
開発を進めて行く中で、アプリが大きくなるにつれcontrollerを増やしたり、serviceにロジックを分割が必要になってきます。
AngularJS用のYeomanジェネレータには、それぞれ専用のジェネレータが用意されいます。

参照：[yeoman/generator-angular · GitHub](https://github.com/yeoman/generator-angular#generators)

それでは、serviceをひとつ追加してみましょう。

```
$ yo angular:service myService
   create app\scripts\services\myservice.js
   create test\spec\services\myservice.js
```

```index.html
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/services/myService.js"></script><!-- ← 追加されている -->
<!-- endbuild -->
```

# Bowerでのパッケージ管理
開発を進めて行く中でライブラリの追加が必要になったら、まずはbowerで提供されていないか検索してみましょう。
今回の例ではFont Awesomeを探してみます。

## ライブラリの検索
```
$ bower search awesome
Search results:

    font-awesome git://github.com/FortAwesome/Font-Awesome.git
    components-font-awesome git://github.com/components/font-awesome.git
    font-awesome-more git://github.com/hectorcenteno/Font-Awesome-More.git
    awesomecloud git://github.com/rajenms/jQuery.awesomeCloud.plugin.git
    Leaflet.awesome-markers git://github.com/lvoogdt/Leaflet.awesome-markers.git
    underscore-awesomer git://github.com/kmalakoff/underscore-awesomer.git
    font-awesome-animation git://github.com/l-lin/font-awesome-animation.git
    awesome-form git://github.com/blakeembrey/awesome-form.git
    myawesomepackagename git://github.com/tomandhisjones/Reddit-Upvoter
```

いくつか見つかりました。

## ライブラリの追加
それでは、ライブラリのインストールを行いましょう。

```
$ bower install --save font-awesome
```

bower.jsonに依存関係を記述するために、`--save`オプションをつけます。
追加されているかどうかは、bower.jsonを見ることで確認できます。

```bower.json
{
  "name": "tokubai-info",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.6",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "jquery": "~1.10.2",
    "bootstrap": "~3.0.3",
    "font-awesome": "~4.0.3" //← 追加されている ※1
  },
  "devDependencies": {
    "angular-mocks": "1.2.6",
    "angular-scenario": "1.2.6"
  }
}
```

## ライブラリの削除
追加するライブラリを間違えました。bowerからfont-awesomeは使えないので削除します。※2


```
$ bower uninstall --save font-awesome
```

`--save`でbower.jsに追加した記述は同じく`--save`オプションをつけることで削除できます。

## htmlからライブラリの読み込み
```
$ bower install --save components-font-awesome
$ grunt bowerInstall
```
`grunt bowerInstall`を行うことで、外部CSSやJavaScriptを読み込むタグを記述してくれます。
追加されているかどうかは、appディレクトリ下のindex.htmlを見ることで確認できます。

```app/index.html
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" /><!-- ← 追加されている -->
<!-- endbower -->
```

CSSは以下の間に

```app/index.html
<!-- bower:css -->
<!-- endbower -->
```

JSは以下の間に

```app/index.html
<!-- bower:js -->
<!-- endbower -->
````

追記されます。しかし、読み込む順番までは考慮してくれないので、必要に応じて手修正する必要があります。

# バージョン管理
Yeomanで自動生成したプロジェクトには.gitignoreが含まれています。

```.gitignore
node_modules
dist
.tmp
.sass-cache
app/bower_components
```

npmやbowerで管理されているライブラリ群、リリース用のディレクトリやtmpディレクトリがgit管理から外されているようです。これは、このままで問題がなさそうなので用意しておいたgithubのレポジトリにpushまで行ってみましょう。

```
$ git init
$ git add -A
$ git commit -m "first commit"
$ git remote add origin git@github.com:tetsuya/firstapp.git
$ git push -u origin master
```

# 共同開発
Yeomanで生成したプロジェクトは、node.jsとYeomanのインストールが完了している環境であれば、

```
$ git clone git@github.com:tetsuya/firstapp.git
$ cd firstapp
$ npm install & bower install
```


# リリース用ファイルの生成
```
$ grunt build
```

実行後`dist`ディレクトリが作成されます。この中身をドキュメントルート下に配置することでデプロイが完了します。

# 補足
## ※1
便宜上コメント行に「//」を使っていますが、jsonとして正しくありません。
参照：[JSONにはコメント行が付けられない？ネットで見つけた方法の有用性を試してみた ｜ Developers.IO](dev.classmethod.jp/etc/adding-comment-to-json/)

## ※2
font-awsomeをインストールした状態で`grunt bower-install`を実行すると下記のようなエラーメッセージが表示されます。
>font-awesome was not injected in your file.
>Please go take a look in "app\bower_components\font-awesome" for the file you need, then manually include it in your file.

これはfont-awesome内にbower.jsが含まれていないためです。

>There are many packages managers... More than for each language ! And for each one you need a mirror repository with built *.js.
>
>Components is here to centralize this, having only one repository by project, supporting every package manager there is and keeping project repositories up-to-date.
>[components/components · GitHub](https://github.com/components/components)

bowerをはじめとするパッケージ管理ツールは数多く存在しますが、ツールごとに異なる`.js`ファイルが必要となります。そこで、Componentsという様々なパッケージ管理ツールに対応した版の配布を行っている方を利用します。

>The Bower repositories try to have a standardized name of components-*.
>[components/components · GitHub](https://github.com/components/components)

原則として、bowerのレポジトリは`components-`から始まるようになっています。