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

Yeomanって何？

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

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

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

参照：[Grunt]Yeomanで開発ワークフローを楽にしよう[bower] ｜ Developers.IO

node.jsのインストール

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

mac

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

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

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

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のインストールは完了です。

AngularJSアプリの拡張

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

参照：yeoman/generator-angular · GitHub

それでは、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が含まれています。

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 [e-mail]:tetsuya/firstapp.git
$ git push -u origin master

共同開発

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

$ git clone [e-mail]:tetsuya/firstapp.git
$ cd firstapp
$ npm install & bower install

リリース用ファイルの生成

$ grunt build

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

補足

※1

便宜上コメント行に「//」を使っていますが、jsonとして正しくありません。
参照：JSONにはコメント行が付けられない？ネットで見つけた方法の有用性を試してみた ｜ Developers.IO

※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

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

The Bower repositories try to have a standardized name of components-*.
components/components · GitHub

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