Edited at

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

More than 3 years have passed since last update.


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

firstapp


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 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


※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-から始まるようになっています。