今年の目標、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
あとは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
このへんは、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
他にも足りないものがあったら、多分エラーの文中で指摘してくれるこの優しさ。
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でサーバと同期するやつとかあるみたいなので、その辺を探る感じかな?