プログラミング備忘録(PHP、JavaScript、WordPress等)

WEB制作を行っている、とある個人事業主のプログラミングに関する技術メモをアウトプットしていきます。

Yeomanの導入手順備忘(MacOS)

一つ作りたいWEBアプリがあり、どの言語で作ろうか考えていましたが、SPA(Single Page Application)で作ってみようと思っています。
Gruntなどにも触れておきたいというのがあったので、Yeomanで環境構築をしてみます。

Yeomanとはいわゆるスキャフォールディングツールですね。

「The web's scaffolding tool for modern webapps」

昔はビルドツールはmakeで手書きで書いてやっていましたから、Gruntなどの自動ビルドツールには大変感謝しています。一回GruntやGulpなどのビルドツールの使い方を覚えてしまえば劇的に不毛な作業からサヨナラできそうですね。

詳しい解説は割愛しますが、ここではインストール時のメモを記載します。

※HomeBrewとnpm、node.jsが入っている前提(バージョンを最新にしておく)
なにやら、nodebrewを使ったほうがいいという記事をあとから見つけたので、そちらで試してもいいかもしれません。
YEOMANをインストールしよう!(だけど解説はMACだけね) - albatrosary's blog

以下は、私のMacに入っているバージョンです。

バージョン確認

$ brew -v
Homebrew 0.9.5 (git revision ff9a; last commit 2016-01-08)

$ node -v
v5.4.0

$ npm -v
3.3.12

私は、node.jsが古いと言われたので、最新にしました。

$ brew upgrade node

インストール

その後、yoと周辺Generatorのインストールを行います。

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

問題なくインストールができたら、プロジェクトを作りたいディレクトリに移動して下記コマンドを叩いてみます。

$ yo angular

色々聞かれますが、必要な機能のGeneratorを選択しましょう。Gulpでもいいですが、Yeomanでの解説サイトはGruntの例が多いので、Gulpだとハマった時に大変かもしれません。
なお、angular以外にもwebappなど様々なGeneratorが存在します。generator-fullstackという、MEANスタック環境が一瞬で構築できるGeneratorもあったりしますので、興味のある方は調べてみてください。

実行

下記コマンドでサーバーが立ち上がり、編集したコードがページ更新無しにリアルタイムで反映されるようになります。
注意点として、上記の$ yo angularでGulpを選択した場合、下記コマンドは使えません。($ gulp で良かったはず)

$ grunt serve

終わりに

特に問題なく導入できたかと思います。導入時のトラブルの少なさも人気の一因なのかもしれませんね。
私の考えでは、最初はyeomanに頼らずにイチから構築し、2回目以降の作業効率化のためにYeomanといった開発支援ツールを使うのが理解が深まると考えています。
そういう私は今書籍ベースで理解を深め中です。

WEB上の情報だけで体系的に学ぶのが難しそうだった(特にビジネスロジック周り)ので、本の力を借りることにしました。著者の山田祥寛さんの本にはいつも助けられています。

AngularJS アプリケーションプログラミング

AngularJS アプリケーションプログラミング