Yeomanって何?
フロントの開発に必要なツール郡です。主な機能として、
- プロジェクトの雛形の作成 (yo)
- 依存するライブラリの管理 (bower)
- 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
<!-- 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": "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を見ることで確認できます。
<!-- 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 -->
<!-- endbower -->
JSは以下の間に
<!-- 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-
から始まるようになっています。