Windows 環境で Yeoman を使う

More than 3 years have passed since last update.

Windows 環境で Yeoman を動作させ、 AngularJS + Bootstrap なひな形を自動生成させるまでの手順。


準備


Node.js インストール

Yeoman は Node.js 上で動くので、 Node.js をインストールしておく。


ダウンロード


インストール


  • node-v0.10.31-x86.msi を実行

  • デフォルトのインストール要件でインストール

  • npm も同時にインストールされる

  • コマンド プロンプトでインストール結果確認

> node -v

v0.10.31
> npm -v
1.4.23


Ruby インストール

ひな形に含まれる SCSS をコンパイルするのに Compass が必要。

Compass は Ruby で書かれたアプリなので、 Ruby をインストールしておく。


ダウンロード


インストール


  • 「インストール先とオプションの指定」画面で、「Ruby の実行ファイルに環境変数 PATH を設定する」にチェックを入れる

  • 他はデフォルトのインストール要件でインストール

> ruby -v

ruby 2.0.0p481 (2014-05-08) [i386-mingw32]
> gem -v
2.0.14


Bundler, Compass インストール


  • gem を最新版に更新し、 Bundler と Compass をインストールする

> gem update --system

> gem -v
2.4.1

> gem install bundler
> bundler -v
DL is deprecated, please use Fiddle
Bundler version 1.7.0

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


Git インストール

Bower を使用するのに Git が必要なので、 Git for Windows をインストールしておく。


ダウンロード


インストール


  • インストール途中 “Adjusting your PATH environment” の画面でコマンドライン使用について聞いてくるので、 “Use Git from the Windows Command Prompt” を選択する

  • 他はデフォルトのインストール要件でインストール

> git --version

git version 1.9.4.msysgit.1


Yeoman インストール

npm を使用して yo, grunt, bower をインストールする。

> npm install -g yo

> yo -v
1.2.1

> npm install -g grunt-cli
> grunt --version
grunt-cli v0.1.13
grunt v0.4.5

> npm install -g bower
> bower -v
1.3.9


  • いっぺんにインストールしてもいい

> npm install -g yo grunt-cli bower


AngularJS + Bootstrap のひな形を作成


ディレクトリ作成


  • ひな形を作成するディレクトリを作成する

  • C:\Documents and Settings のようにディレクトリ名に空白があると yo がうまく動かないようなので、 C:\ 直下にプロジェクト用ディレクトリを作成する

> cd C:\

> mkdir project & cd project
> mkdir YeomanTest & cd YeomanTest


generator-angular インストール


  • AngularJS 用のジェネレーター generator-angular をインストールする

> npm install -g generator-angular


Yo を実行

> yo angular


  • 初回起動時のみ、使用状況を送信するかどうかの確認が表示されるので、 Y (Enter) or n で答える

[?] ==========================================================================

We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
==========================================================================: (Y/n) → Enter


  • Compass の使用、 Bootstrap の使用などいくつか質問されるが、今回はすべて Enter (Yes) で答える

     _-----_

| | .--------------------------.
|--(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)? (Y/n) → Enter
[?] Would you like to include Bootstrap? (Y/n) → Enter
[?] Would you like to use the Sass version of Bootstrap? (Y/n) → Enter
[?] Which modules would you like to include? (Press <space> to select) → Enter
>[X] angular-animate.js
[X] angular-cookies.js
[X] angular-resource.js
[X] angular-route.js
[X] angular-sanitize.js
[X] angular-touch.js
...
...
...
app/index.html modified.


動作確認


  • Grunt を使用してローカルサーバーを実行し、ブラウザーで表示するタスクを実行する

> grunt serve


  • ブラウザーが自動的に起動し、 localhost:9000 でデフォルトページが表示される

  • Ctrl+C で終了できる


他端末から接続可能にする


  • grunt serve で起動するローカルサーバーは、デフォルトでは自端末以外の接続を拒否している

  • タスク管理ファイル Gruntfile.js を編集し、他端末からの接続を許可する

  • C:\projects\YeomanTest\Gruntfile.js をエディタで開き、以下の箇所を修正する

    // The actual grunt server settings

connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
- hostname: 'localhost',
+ hostname: '0.0.0.0',
livereload: 35729
},


  • grunt serve でサーバーを起動すると、他端末から接続可能となっている


その他小ネタ


  • grunt test など、 Gruntfile.js には他にもタスクが登録されている模様

  • yo angular --minsafe とか yo angular:controller <name> など、ジェネレーターにもオプションがある模様

  • bower <name> --save で使用するスクリプトを追加したりできる模様