Yeomanとは

Yeomanはツールやライブラリを迅速で綺麗なWeb環境として構築するワークフローツールです。

http://yeoman.io/

なぜ今日 Yeoman?

$ npm install -g xxxxxx...

最近よく見かけますよね

Yeomanのインストール準備

$ curl -L get.yeoman.io | bash

必要な言語・ライブラリ

• ✓ curl
• ✓ git
• ✓ NodeJS
• ✓ ruby
• ✓ RubyGems

• ✓ Compass
• ✓ PhantomJS
• ✓ jpegtran
• ✓ optipng
• ✓ yeoman

Yeomanのインストール

$ npm install -g yeoman

Yeomanの主な機能

強力なScaffolding

$ yeoman init [quickstart]

Webアプリケーションフォルダ等のひな形が生成される

Auto compile

CoffeeScriptやCompassを自動でコンパイルする

サーバいらず

Yeomanにはコマンドからビルトインサーバーを起動することができる

構文チェック

JSHINTを使った構文チェック

画像最適化

ビルドによって画像の最適化を行う

自由なテンプレート

フォルダ構成を自由にテンプレート化できる

自動リロード

ファイルの変更を監視しHTTPサーバの自動でリロード

パッケージ管理

ライブラリ/モジュールのインストールを楽に管理できる

ES6サポート

ECMAScript6をサポート(?)

How to Yeoman

Yeoman最短フロー

$ yeoman init [quickstart]
$ yeoman test
$ yeoman server[:dist]
$ yeoman build

いろいろなジェネレータ

# Generators for MVC/MV* Frameworks
$ yeoman init quickstart                   # Skip our questions and get a H5BP, jQuery and Modernizr base
$ yeoman init bbb                          # Backbone Boilerplate generator scaffold
$ yeoman init ember                        # Ember-Rails generator scaffold
$ yeoman init backbone                     # Backbone-Rails generator scaffold

ジェネレータテンプレート

#/node_modules/yeoman/node_modules/yeoman-generators/lib/generators/xxxxxxx/

テンプレートとして追加すると「yeoman init xxxxxxx」で実行可能

パッケージ管理

$ yeoman install   # Install a package from the client-side package registry
$ yeoman uninstall # Uninstall the package
$ yeoman update    # Update a package to the latest version
$ yeoman list      # List the packages currently installed
$ yeoman search    # Query the registry for matching package names
$ yeoman lookup    # Look up info on a particular package

Yeomanで利用しているnpmモジュール

パッケージ管理

Twitter BOWER

http://twitter.github.com/bower/

component.jsonでライブラリの管理を一元化

自動コンパイル
/ 自動リロード

Grunt

http://gruntjs.com/

gurunt.jsでタスクを管理
(YeomanではGruntfile.js)