Yeomanでangularjsの導入

初めに

新しくプロジェクトを作って、angularjsのひな型を作るのは、面倒だ。もちろん、慣れるまでには、試行錯誤しながらangularjsのWebアプリとかWebページを自力で作っていくのは勉強になるんだけど。でも、だいたい仕組みがわかってきてから、新たにプロジェクトを作って、さてangularjsに必要なものは何だっけ?そもそも、なんのライブラリ使うんだっけ?bootstrapやら、Font Awesomeはどこからダウンロードするんだっけ?。ってやってるとひな型作るだけで、一日終わってしまう。まあ、それはそれで勉強になって楽しいけれど。でもひな型を、ある程度作ってくれるものがあったら便利だよね。それがYeomanだったりする。

下準備

最初にnode jsは入っているよね。もし入っていなかったら

https://nodejs.org/en

からダウンロードして、インストールする。

次に、YeomanとYeomanで使うツールgruntとbowerのインストール。gruntは、プロジェクトのmin化してくれたり、coffee scriptやlessのコンパイルしてくれたりする。bowerはライブラリ関連のインストールや管理をしてくれる。最後に、ひな型を作ってくれるgenerator-angularをインストール

ここまでの作業は、環境づくりなので、一度やればOK。

プロジェクトの生成

いよいよプロジェクト作るよ。

これだけ。

もちろん、プロジェクト名を聞かれたり、angularのモジュールのどれを入れるのか?bootstrapを入れるか?は聞かれるけど、これだけでbootstrapとangularとangular-routeとangular-animateが入ったひな型ができてしまう。便利すぎる。

とりあえず動かしてみる。

これで、ひな型だけでWebページが見れる。gruntがWebserverの役割を果たしてくれる。実際のプロジェクトはapp/の中にある。試しに、この状態で、app/views/main.htmlの中を書き換えてみると、即座にブラウザでもリロードしてくれる。デバッグが凄くしやすくて便利♪

ほかのライブラリを入れる

たとえば、ほかにui bootstrapとかmoment.jsとか入れたくなったらbowerコマンドを使う。

もし、ライブラリがいなくなったら

サーバーにアップするのはどうすれば??

ここまででブラウザでのチェックとか、ライブラリのインストールとかはわかったけれど、そもそもどれをサーバーにアップすればいいのだろう??ディレクトリを見た人はわかると思うけど、あまりにも複雑で何をアップしていいのやら・・・

でも、ここからがyeomanの本領発揮(いやgruntか)!。

これで、なにやら作業をはじめて、distディレクトリができます。grunt buildコマンドで、coffee scriptのコンパイルとかlessのコンパイルとかminify作業とか全部やって、結果だけdistに放り込んでくれます。僕らは、出来上がったdistディレクトリの中身だけをサーバーにアップすれば、もうやることはない。しかも、サーバに上げるものは、minify化されていて小さくなっているし。すごいねyaoman!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">