Yeomanをインストールしてみる

Yoeman(ヨーマン)はWebアプリの作成時の色々な作業（例えば、アプリ開発時にの定型作業の自動化など）をサポートしてくれる便利ツール。

Yoemanの構成ツール

• yo - 雛形作成ツールです。yeoman-generator
• bower - JavaScriptライブラリ、CSSフレームワークなどのパッケージマネージャ
• grunt - ビルドツール。JavaScriptベースのタスクランナー。

Yoemanのセットアップ

前提

Node.jsがインストールされており、npmが利用できること。

yoと必要なツールをインストール

$ npm install -g yo bower

generator-webappジェネレータのインストール

$ npm install -g generator-webapp

プロジェクトディレクトリの作成

$ mkdir my-yo-project
$ cd my-yo-project

Webアプリ雛形を作成する

$ yo webapp

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

Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.
? What more would you like? 
❯◉ Bootstrap
 ◯ Sass
 ◯ Modernizr
:
:

$ ls -la
total 88
drwxr-xr-x  15 user  staff   510 11 25 23:48 .
drwxr-xr-x  13 user  staff   442 11 25 23:42 ..
-rw-r--r--   1 user  staff    38 10  8 06:10 .bowerrc
-rw-r--r--   1 user  staff   415 10  8 06:10 .editorconfig
-rw-r--r--   1 user  staff    11 10  8 06:10 .gitattributes
-rw-r--r--   1 user  staff    40 11 25 23:47 .gitignore
-rw-r--r--   1 user  staff   353 10  8 06:10 .jshintrc
-rw-r--r--   1 user  staff    27 11 25 23:47 .yo-rc.json
-rw-r--r--   1 user  staff  9462 11 25 23:47 Gruntfile.js
drwxr-xr-x   8 user  staff   272 11 25 23:47 app
-rw-r--r--   1 user  staff    99 11 25 23:47 bower.json
drwxr-xr-x   4 user  staff   136 11 25 23:48 bower_components
drwxr-xr-x  25 user  staff   850 11 25 23:48 node_modules
-rw-r--r--   1 user  staff   885 11 25 23:47 package.json
drwxr-xr-x   7 user  staff   238 11 25 23:47 test

サーバーを起動する

$ grunt server
-bash: grunt: command not found

あれ、どうやら事前にgrunt-cliもインストールする必要があるみたい。1

$ npm install -g grunt-cli

これでもう一度。

$ grunt server
Running "server" task
>> The `server` task has been deprecated. Use `grunt serve` to start a server.

Running "serve" task

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

Running "wiredep:app" (wiredep) task
app/index.html modified.

Running "concurrent:server" (concurrent) task

    Running "copy:styles" (copy) task
    Copied 1 files

    Done, without errors.


    Execution Time (2014-11-25 15:02:04 UTC)
    loading tasks  1.1s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 99%
    Total 1.1s

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

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

Running "watch" task
Waiting...

これでサーバーが起動して、ブラウザが自動で開いて画面が表示される。