Yeomanのチュートリアルをやってみたメモ – ‘Allo, ‘Allo!

今年の目標、Yeoman。
Angular.jsとかGruntとかSassはちょいちょいやってきたけど、肝心なYeomanをまともにいじらずで半年過ぎてしまった。

入門系の記事をみてても何かうまくいかないことが多かったので、公式のチュートリアルをやってみた。
http://yeoman.io/codelab.html

いつも以上に素人感が溢れる記事。すみませんすみません。

開発環境

Macだとnodebrewが扱いやすいとのこと。
チュートリアルとかにバージョン合わせるのにいいかも。
参考)http://albatrosary.hateblo.jp/entry/2014/03/23/105356

yoに失敗

yoでインストール中になんか足りないとかで失敗するときは、AngularJSのgeneratorのインストールに失敗していることがあるらしい。
自分は「bower_components」がどうにも作られなかった。

チュートリアルにあるこのコマンドの時に。

npm install --global generator-angular@0.9.2

sudoもすれば、–forceもした方がいいらしい。

sudo npm install --force --global generator-angular@0.9.2

参考)http://kakashi-kobo.weblike.jp/warehouse/2014/02/01/yoman%E3%82%92%E3%81%84%E3%82%8C%E3%82%88%E3%81%86%E3%81%A8%E3%81%97%E3%81%A6%E5%A4%B1%E6%95%97%E3%81%97%E3%81%9F/

あとはnpmのキャッシュが残ってておかしなことになることがあるので、キャッシュをクリーンしたほうがいいみたい。

npm cache clean

参考)https://github.com/yeoman/generator-angular/issues/761

grunt serveに失敗

gruntがねえよ!って話なら、

npm install grunt --save-dev

参考)http://blog.kazupon.jp/post/39482409323/grunt-scratch-project

gruntのなんかが足りねえよ!って話なら

npm update

http://stackoverflow.com/questions/21578683/im-cloning-a-repo-with-yeoman-what-configuration-do-i-need-on-my-computer

このへんは、gruntやってれば普通かも知れん。すっかり忘れてた。

そして楽しいコーディングスタート。

AngularJSの話で、「$index ⇢ ng-repeat のアイテムを指す」これ知らんかったかもしれん。
ということも思い出せなくなってる。

bowerの使い方

bowerさんはお初にお目にかかる。

リストを見る:
bower list

探す:
bower search angular-ui-sortable

インストール:
bower install –save angular-ui-sortable
bower install –save jquery-ui

まとめてインストール:
bower install –save angular-ui-sortable jquery-ui

んでgrunt serveすると、index.htmlに追加される

<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="bower_components/angular-ui-sortable/sortable.js"></script>

app.jsには手動で追加するのですよ。

grunt testに失敗

gruntのときと同じ、karma入ってないで!

sudo npm install grunt-karma --save-dev

参考)http://stackoverflow.com/questions/17313157/generator-angular-task-karma-not-found-when-calling-grunt-test

他にも足りないものがあったら、多分エラーの文中で指摘してくれるこの優しさ。

WARN [plugin]: Cannot find plugin "karma-phantomjs-launcher".
Did you forget to install it ?
npm install karma-phantomjs-launcher --save-dev

仕上げ

grunt コマンドで全部なぞってdistにいい感じのものが生成されて入る
grunt serve:distで確認できる

アップ

ほんでサーバにアップして思ったけど、サーバ上でもgrunt serve(もしくはgrunt serve:dist)でいいのかな?
一応動いたけど、パスがグダグダっぽい。

Composerの時と同じく、サーバ上で作っちゃったほうがいいんだろうか?
その辺は引き続きやってみる。

追記:
generatorで生成してからコーディングせずにgruntでビルドしたdistをアップすればgrunt serve無しでも動いた。
ってことはコーディング中に問題が何かあるのかもだけど、ローカルのチェックでエラーはないから判断難しい。
gruntでサーバと同期するやつとかあるみたいなので、その辺を探る感じかな?