Yeoman + AngularJS ではじめるフロントエンド開発入門

Yeoman って何？

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

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

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

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

実行環境

今回は、以下のバージョンで動作確認しています。

$ node -v
v0.10.24

$ npm -v
1.3.21

Yeoman のインストール

$ npm install -g yo

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

AngularJS 用の Yeoman ジェネレータのインストール

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

$ npm install -g generator-angular

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

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.hmlt に以下の行が追加されているはずです。

  <!-- 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 を見ることで確認できます。

{
  "name": "firstapp",
  "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"
  },
  "devDependencies": {
    "angular-mocks": "1.2.6",
    "angular-scenario": "1.2.6"
  }
}

ライブラリの削除

font-awsome をインストールした状態で grunt bower-install を実行すると下記のようなエラーメッセージが表示されます。

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

まずは、誤って bower から追加してしまった font-awesome を削除します。なお --save で bower.js に追加した記述は同じく --save オプションをつけることで削除できます。

$ bower uninstall --save font-awesome

Components からライブラリの読み込み

$ bower install --save components-font-awesome
$ grunt bowerInstall

grunt bowerInstall を行うことで、外部 CSS や JavaScript を読み込むタグを記述してくれます。追加されているかどうかは、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 は bower:css のコメントタグ以降に、JS は bower:js コメントタグ以降に埋め込められます。しかし、読み込む順番までは考慮してくれないので、必要に応じて手修正する必要があります。

バージョン管理

Yeoman で自動生成したプロジェクトには .gitignore が含まれています。

node_modules
dist
.tmp
.sass-cache
app/bower_components

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

$ git init
$ git add -A
$ git commit -m "first commit"
$ git remote add origin [email protected]:tetsuya/firstapp.git
$ git push -u origin master

ビルドと公開

本番環境で動作する最適化された SPA を生成します。

$ grunt build

実行後 dist ディレクトリが作成されます。この中身を Web サーバのドキュメントルートに配置することでアプリケーションを公開できます。