Windows
yeoman

Windows 環境で Yeoman を使う

More than 1 year has 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 で使用するスクリプトを追加したりできる模様