yeoman + bower + grunt

最近流行の環境を作って使うことにした. 情報自体はいっぱいあるのであまりN/S比を悪化させたくない. 自分用メモとありがちなのとちょっと違う部分にふれておく. たとえば

• Bower + Grunt + Yeomanでつくるフロントエンド・ワークフロー (Qiita)
• grunt bower yeoman入門記事
• 以下たくさん

今回の利用目的はcraftyで作っているshogi用のjsの開発. 500行を超えてそろそろいろいろ辛くなってきて, 一方でtestとか書いてもモチベーションを維持できそうな確信が持てたからである.

主にほしいと思ったメリット:

• パッケージのフォーマット
• パッケージングの自動化
• Testのツール
• Testの自動化
• コード圧縮ツール
• あたらしいものさわりたい

といったところ. 想定していなかったけど良かったのはjshintとかかな.

どんな感じでインストールしたか? というと, 環境がScientific Linux(CentOSみたいなもん) なのでsudo yum install npmでまずnpmを入れた. 次にnpmでインストールするのだが, -gは身の毛がよだつようなオプションに感じたので使わないことに. やはり開発環境になにが入っているかはっきりしている方が気分がいい. --saveをいちいち書かないといけないのはどうなのか.

npm i yo yeomanをいれ、 npm i generator-craftyと craftyの開発のテンプレートを生成するgeneratorを入れます. ./node_modules/yo/cli.js craft ./node_modules/yo/cli.js crafty:scene MyScene ./node_modules/yo/cli.js underscore などとたどたどしく入力. これでappの下にbower_componentsとしてcraftyなど依存したモノがインストールされた.

知っている人は「何やってんねん」だろうし, 知らない人は「なんでそんなにタイプするの？面倒じゃない」だろう. npm -gしないのが悪い!という説もあるけど、そこは譲るつもりがない. PATHを通せばよいのです. というわけでpythonのvirtualenvからactivateのスクリプトを持ってきて手を入れました. 部分的に抜き出すとこんな感じ.

deactivate nondestructive

VIRTUAL_ENV="略/shogi-js/node_modules"
export VIRTUAL_ENV
_OLD_VIRTUAL_PATH="$PATH"
PATH="$VIRTUAL_ENV/.bin/:$PATH"
export PATH

# unset PYTHONHOME if set

なにも難しいことはしていません. node_modules/.binにいろいろある、ということです. これでめでたく$ gruntとか実行できるようになりました. 特定のnode_modules/.binしか見ないのですっきりです.

.jshintrcを書く. 最終的に こうなった. .jshintrcはjsonではないらしいです. 仕様がよくわかりません. なにはともあれ、コメントを入れるときに困るので, jsonで書いてjqで処理したモノを.jshintrcとして置いておき, 原本にコメントを一杯入れる方針にしました.
あのさーgeneratorが吐くGruntfile.jsがボコボコなんですけど... ぼこぼこすぎてjshintが途中でさじ投げます. 弱小generatorだと叩く人が少ないからこんなもんなんでしょうか. jshintの勉強だと思って少しずつ直していきたいと思います.

修正後のindex.html 最初は改行コードが統一して無くて吐きそうになった. 弱小テンプレートはよくない. webappだったらあり得ない話でしょう. 無より良いくらいで頑張っていきたいと思います. srcに入っているbower_componentsのpathはもうちょっとすっきりさせる方法が あるらしいのですがまだやってないです. この辺はwebappで作っても同じはず. 構造的にindex.htmlしかなくて, そこでCrafty.initしてsceneを走らせる点では 全く同じでそれ以外作りようがないのでこの辺は迷う余地がなかったです.