【YEOMAN】開発環境構築（Windows8） - タイガー！タイガー！じれったいぞー！（SE編）

現在、開発の主体は、AS400とJavaの2系統で行っていますが、よりモダンな開発スタイルも、今のうちにシコシコと習得しておく必要がありそうです。

動向をチェックしていると、Java Scriptフレームワーク戦争が起きているのは一目瞭然で、昔はあれほど非難されていたJavaScriptが、いちやくスターダムに出てくるとは、これもGoogle様々ですね。

さてさて。自分はどのJSのフレームワークを使いこなせるかというと、現時点でゼロ。

何から勉強しようかと思っていたのですが、あれこれ考えず、まずは一番人気のAngularを理解していこうと思っています。
最近だと「React.js」の急上昇ぶりには驚くばかりでしたが、まずは人気どころで基本をしっかりとマスターしたい！
今年後半や来年にはAngular2が登場するという話もありますが、それまでにAngularの基本やその他のフレームワークを少しずつ試しておこうと考えています。

というわけで、開発用ノートPCへYEOMANの開発環境を構築してみました。
その際のメモになります。

作業手順

(1) Git導入

YeomanのToolにて、Bowerが指定したJS,CSSライブラリーを自動取得してくれるので、Gitが必要になるので、導入します。
https://msysgit.github.io/
- Git-1.9.5-preview20150319.exe（環境構築時のVersion）
環境変数登録結果
- システム環境変数bin「C:\Program Files (x86)\Git\bin」

> git --version
git version 1.9.5.msysgit.1

(2) Node.jsインストール

YeomanはNode.js上で動くとのことで、インストールします。デフォルト・インストールでOKのようです。
[https://nodejs.org/]
- node-v0.12.2-x64.msi（環境構築時のVersion）
インストール先：「C:\Program Files\nodejs」
環境変数登録結果
- システム環境変数Path「C:\Program Files\nodejs」
- ユーザー変数PATH「C:\Users\tigertaizo\AppData\Roaming\npm」

> node --version && npm --version
v0.12.2
2.7.4

(3) npm更新

npm install --global npm@latest

> npm install --global npm@latest
C:\Users\tigertaizo\AppData\Roaming\npm\npm -> C:\Users\tigertaizo\AppData\Roaming\npm
\node_modules\npm\bin\npm-cli.js
npm@2.9.1 C:\Users\tigertaizo\AppData\Roaming\npm\node_modules\npm

(4) Yeoman toolsetインストール

> npm install --global yo bower grunt-cli

展開先
- C:\Users\tigertaizo\AppData\Roaming\npm\node_modules\bower
- C:\Users\tigertaizo\AppData\Roaming\npm\node_modules\grunt-cli
- C:\Users\tigertaizo\AppData\Roaming\npm\node_modules\yo

> yo --version && bower --version && grunt --version
1.4.6
1.4.1
grunt-cli v0.1.13

(5) generator-angularインストール

npm install --global generator-angular

展開先
- C:\Users\tigertaizo\AppData\Roaming\npm\node_modules\generator-angular
- C:\Users\tigertaizo\AppData\Roaming\npm\node_modules\generator-karma

(6) プロジェクトファイル作成・構築（Angular）

①ディレクトリ作成・移動

> mkdir C:\develops\html5\angularApp
> cd C:\develops\html5\angularApp

②Yoコマンド実行

yo angular

c:\develops\html5\angularApp> yo angular

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Sass (with Compass)? Yes
? Would you like to include Bootstrap? Yes
? Would you like to use the Sass version of Bootstrap? Yes
? Which modules would you like to include? (Press  to select)
>(*) angular-animate.js
 ( ) angular-aria.js
 (*) angular-cookies.js
 (*) angular-resource.js
 ( ) angular-messages.js
 (*) angular-route.js
 (*) angular-sanitize.js
 (*) angular-touch.js

[...]

(7) 開発環境Webサーバー起動

grunt serve

c:\develops\html5\angularApp> grunt serve
Running "serve" task

Running "clean:server" (clean) task
>> 0 paths cleaned.

Running "wiredep:app" (wiredep) task

Running "wiredep:test" (wiredep) task

Running "wiredep:sass" (wiredep) task

Running "concurrent:server" (concurrent) task

Running "compass:server" (compass) task
directory .tmp/styles
        write .tmp/styles/main.css (4.289s)
        write .tmp/styles/main.css.map

Done, without errors.


Execution Time (2015-05-17 08:03:42 UTC)
compass:server  8s  ██████████████████████████████████████████████ 100%
Total 8s

Running "autoprefixer:server" (autoprefixer) task
File .tmp/styles/main.css created.
File .tmp/styles/main.css.map created (source map).

Running "connect:livereload" (connect) task
Started connect web server on http://localhost:9000

Running "watch" task
Waiting...

下記のような画面がブラウザ上に出現すれば成功です！

[f:id:no14141:20150517171615p:plain]

(8) プロジェクト・ビルド

grunt build

c:\develops\html5\angularApp> grunt build
Running "clean:dist" (clean) task
>> 1 path cleaned.

Running "wiredep:app" (wiredep) task

Running "wiredep:test" (wiredep) task

Running "wiredep:sass" (wiredep) task

Running "useminPrepare:html" (useminPrepare) task
Configuration changed for concat, uglify, cssmin

Running "concurrent:dist" (concurrent) task

Running "svgmin:dist" (svgmin) task
Total saved: 0 B

Done, without errors.

Execution Time (2015-05-17 08:09:04 UTC)
loading tasks   16ms  ███████ 13%
svgmin:dist    109ms  █████████████████████████████████████████ 87%
Total 125ms

Running "imagemin:dist" (imagemin) task
Minified 1 image (saved 5 kB)

Done, without errors.

Execution Time (2015-05-17 08:09:04 UTC)
loading tasks   15ms  ██ 3%
imagemin:dist  438ms  ██████████████████████████████████████████████ 97%
Total 453ms

Running "compass:dist" (compass) task
directory .tmp/styles
        write .tmp/styles/main.css (1.639s)

Done, without errors.

Execution Time (2015-05-17 08:09:04 UTC)
compass:dist  4.7s  ████████████████████████████████████████████████ 100%
Total 4.7s

Running "autoprefixer:server" (autoprefixer) task
File .tmp/styles/main.css created.

Running "autoprefixer:dist" (autoprefixer) task
File .tmp/styles/main.css created.

Running "concat:generated" (concat) task
File .tmp\concat\scripts\vendor.js created.
File .tmp\concat\scripts\scripts.js created.

Running "ngAnnotate:dist" (ngAnnotate) task
>> 2 files successfully generated.

Running "copy:dist" (copy) task
Copied 12 files

Running "cdnify:dist" (cdnify) task
[...]

Running "cssmin:generated" (cssmin) task
>> 2 files created. 307.09 kB → 111.78 kB

Running "uglify:generated" (uglify) task
>> 2 files created.

Running "filerev:dist" (filerev) task
Revved 5 files

Running "usemin:html" (usemin) task
Replaced 4 references to assets

Running "usemin:css" (usemin) task
Replaced 2 references to assets

Running "htmlmin:dist" (htmlmin) task
Minified 4 files

Done, without errors.

Execution Time (2015-05-17 08:08:50 UTC)
wiredep:app          480ms  █ 1%
concurrent:dist      17.9s  ███████████████████ 44%
autoprefixer:server  453ms  █ 1%
ngAnnotate:dist      946ms  █ 2%
cdnify:dist          10.6s  ███████████ 26%
cssmin:generated     532ms  █ 1%
uglify:generated      9.1s  ██████████ 22%
Total 40.6s

これにより「C:\develops\html5\angularApp\dist」内に、アプリケーションが展開されました！　JavaのMavenやGradleと同じようにJSアプリでも簡単に同じことができるということがわかりました。

まだテンプレートでアプリの開発基本動作を理解しただけなのですが、これをベースに基礎学習を進めていけそうですね！！！

参考サイト

LET'S SCAFFOLD A WEB APP WITH YEOMAN

追記（2015-05-28）

自分の記事を見ながら、別PCで同一環境構築を実施しましたが、「grunt serve」のところで下記の通りのエラーで起動しませんでした。
compass.batが見つからないとのこと。

c:\develops\html5\angularApp>grunt serve
Running "serve" task

Running "clean:server" (clean) task
>> 0 paths cleaned.

Running "wiredep:app" (wiredep) task

Running "wiredep:test" (wiredep) task

Running "wiredep:sass" (wiredep) task

Running "concurrent:server" (concurrent) task
    Warning: Running "compass:server" (compass) task
Warning: Couldn't find the `compass.bat` binary. Make sure it's installed and in
 your $PATH Use --force to continue.

Aborted due to warnings.

<a href="http://qiita.com/Syn/items/f700b325e07222b64960">Windows 環境で Yeoman を使う - Qiita</a>qiita.com

こちらのサイトにお世話になり、Ruby、Bundler、Compassをインストールしたら、正常に起動できました。上の操作手順に加えて、下記の手順を追加いたします。
申し訳ありませんでした。。。

(*) Ruby, Bundler, Compassインストール

Rubyインストール

Ruby - Downloads
ダウンロードしたファイル（インストーラー）
- rubyinstaller-2.2.2-x64.exe
インストール先
- C:\Ruby22-x64
ユーザー環境変数pathへ追加
- C:\Ruby22-x64\bin;

>ruby -v
ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32]

>gem -v
2.4.5

>gem update --system
:
RubyGems system software updated

>gem -v
2.4.7

Bundler, Compass インストール

>gem install bundler
:
1 gem installed

>bundler -v
Bundler version 1.9.9

>gem install compass

>compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass