読者です 読者をやめる 読者になる 読者になる

タイガー!タイガー!じれったいぞー!(SE編)

AS400,WAS,GlassFish,Java,JavaEE,JSF等の開発における日々の気づきをまとめたブログ(備忘録)。

【YEOMAN】開発環境構築(Windows8)

現在、開発の主体は、AS400Javaの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)
  • 環境変数登録結果
> 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」内に、アプリケーションが展開されました! JavaMavenやGradleと同じようにJSアプリでも簡単に同じことができるということがわかりました。

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

参考サイト

追記(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.

qiita.com

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

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

Rubyインストール
>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