このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2014.04.20

Yeoman フロントエンドビルドツール「Yeoman」で サクっとAngularJS 雛形作成

Yeomanとは

Yeomanはフロントエンドビルドツールで、 Google社が作成した総合開発ツール群となります。

読み方は「ヨーマン」と呼びます。

公式サイト

Yeoman

http://yeoman.io

公式サイトには

MODERN WORKFLOWS FOR MODERN WEBAPPS

(モダンWEBアプリケーションのためのモダンワークフロー) と記述されていますね。

今回はYeomanを使用したAngularJSのはじめ方です。

Yeomanを使うことでコマンドラインからの対話形式で雛形(テンプレート)を作成する事ができ、

プロジェクトに適した雛形を制作することができます。

準備 (インストール)

まずは、YeomanでAngularJSを始めるのに必要なYeomanGruntBowerをインストールします。

[code]$ npm install -g yo grunt-cli bower[/code]

次に、YeomanでAngullarJSやAngularJSのコントローラーなどのひな形を生成するジェネレーターをインストールします。

[code]$ npm install -g generator-angular[/code]

他にもいろいろなジェネレーターがあり、検索は npm search generator で検索することが可能です。

Sassを使用する場合はCompassの インストールが必要になりますのでインストールしておきましょう。

[code]$ gem install compass[/code]

AngularJSのひな形作成

インストールが完了しましたら、プロジェクトのディレクトリに移動。

yo コマンドを使ってひな形を生成します。

[code]$ yo <generator> [arguments] [--help] [/code]

yo を入力すると対話式に以下の様な感じでコマンドを実行することが可能となります。

今回は、AngularJS のプロジェクトを作成しますので、以下のコマンドを入力。

[code]$ yo angular APP_NAME[/code]

APP_NAMEは任意のアプリネームを入力。

しかし、このままだとminify時にエラーが出てしまうので、以下のコマンドで入力。

[code]$ yo angular --minsafe[/code]

このように、--minsafeオプションを使用することによって、minify時にエラーが出るということがなくなります。

コマンドを実行するとBootstrapを使うか、AngularJSの各種モジュールを使うか等

聞かれるのでプロジェクト合わせて Yes/Noを 選択してください。

AAのyoman登場

対話式にインストール

あとからBowerで入れなおしたり、削除したりできるので取り敢えず全てYesでも問題ありません。

ディレクトリ構成

インストールが完了すると以下のようなディレクトリ構成になります。

app/ - ドキュメントルート

test/ - テストファイルディレクトリ 

node_modules/ - npmモジュールディレクトリ

bower.json - bower設定ファイル

karma-e2e.conf.js - Karma E2Eテスト設定ファイル

karma.conf.js - Karma設定ファイル 

package.json - nom設定ファイル

Gruntfile.js - grunt設定ファイル

bower_components/ - bowerコンポーネントディレクトリ

images/ - 画像ディレクトリ

scripts/ - JS/Cofee Scriptディレクトリ

styles/ - CSS/Sass/Scssディレクトリ

views/ - AngularJSのViewディレクトリ

404.html

favicon.ico 

index.html

robots.txt

その他、gitファイル

 

Grunt

1から記述するとなると、意外に大変なGruntfile.jsの設定ですが、Gruntfile.jsを確認するとすでに良く使われるタスクが設定されています。

[code]$ grunt serve[/code]

上記のコマンドで、appディレクトリをドキュメントルートしてWEBサーバーが起動します。

成功すると、このような画面が表示するかと思います。

色々なタスクが実行され、watch状態となります。

ファイルを編集するとLiveReloadが実行され、自動で編集内容が反映してくれます。

※ grunt serverは廃止になって代わりにgrunt serveを使うようです。

テスト

[code]$ grunt test[/code]

karma+jasmineでのテストを実行します。

E2Eテストのタスクはないようなので、E2Eテストを行う方はGruntfileにタスクを追加する必要があります。

ビルド

[code]$ grunt build[/code]

distディレクトリにappディレクトリの内容をコンパイルしたものを出力します。

デフォルト設定でのビルドではhtmlのminifyがなかったり、

bower_componentsディレクトリがそのままコピーされているので、気になる方はGruntfile.jsを修正してください。

Bower

AngularJSで使用するJSライブラリを追加したい場合は、

bower.jsonに追加していきます。

例えばAngularUIを使用する場合は

[code]"dependencies": { ... "angular-ui": "~0.4.0" },[/code]

と追記して

[code]$ bower install[/code]

と実行すると、

AngularUIをbower_componentsディレクトリにインストールすることができます。

もし、ビルド前のときなどdependenciesに記載したライブラリだけをインストールしたい場合は、

[code]$rm -rf app/bower_components/** $bower install --production[/code]

と実行するとdependenciesのものだけをインストールすることが出来ます。

Gruntにgrunt-bower-taskというのがありますので、ビルドプロセスに含めるとより便利になります。

以上、Yeomanを使用したAngularJS雛形作成でした。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。