yeoman

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

More than 3 years have passed since last update.

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...

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

起動後の画面