YeomanでAngularの開発環境を作ってみる

YeomanでAngularの開発環境を作ってみるAngularJSリファレンスを参考にAngularの開発環境を作ってみました。

Node.js/npm

まずは、Node.jsです。Node.jsからダウンロードして利用してもよいのですが、nodebrewという複数のnode.jsを管理できるツールが有るということでそちらを利用することにしました。

こちらの記事を参考に既存のnode.jsをアンインストールした後、下記の記事を参考にインストールしました。

Node.js – Mac OSXにnodebrewをインストールする – Qiita

--saveまたは、--save-devオプションをつけると、インストールしたパッケージの情報がpackage.jsonに保存されます。

bower

クライアントサイドのJavaScriptライブラリはbowerで公開されているケースが殆んど(AngularJS含め)ということなので、bowerをインストールします。

$ npm install -g bower

npm installは通常カレントディレクトリにパッケージをインストールしますが、-gを付けることでグローバルにインストールできます。

bower install時に--saveオプションをつけると、bower.jsonにパッケージが保存されます。

grunt

$ npm install grunt
$ npm install grunt-cli -g

Yeoman?

$ npm install -g yo
$ npm install -g generator-angular

でも、Yeomanってなんだ!?と思ってちょっと調べてみた。

で、やってみた!

$ yo
...

     _-----_
    |       |    .----------------------.
    |--(o)--|    |     Bye from us!     |
   `---------´   |      Chat soon.      |
    ( _´U`_ )    |                      |
    /___A___\    |      Yeoman team     |
     |  ~  |     |   http://yeoman.io   |
   __'.___.'__   '----------------------'
 ´   `  |° ´ Y `

「おお」

$grunt build
$grunt serve

Allo

ほほ〜。ひな形から学べそうだし、他にもできること調べながらこの世界に慣れていけそう。ちなみに、Yoはひな形作成ツール。Gruntは処理の自動化?ツール、bowerはフロント側のライブラリ管理ツールといったところか。どういうフローで作業すればよいかまだ見えてないけれど、少しずつ触りながら進んでいこう。

参考

AngularJSリファレンス

JavaScriptフロントエンド開発の昨今 // Speaker Deck

Pocket
LINEで送る

You may also like...