179
185

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-01-30

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

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

179
185
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
179
185

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?