Edited at

Yeomanのあれこれ

More than 5 years have passed since last update.


はじめに

 僕はWebフロントエンドはほぼやってないんだけど、Firefox OSとかもアレだって事でソレ系にも手を出すかとあれこれやってたらまぁWebのフロントエンド周りのツールが何か色々あってよくわかんねーしどうしよっかなと思ってた所Yeoman辺りが大分良さそうなんじゃないか程度にはわかって来たので手を出してみた次第。


Yeomanってなに

 Webフロントエンドでよくある各種構成をコマンド一発で生成してやろうじゃん、というのがYeomanらしい。Yeomanは内部でyo, bower, gruntの3つのツールにわかれていて、Yeoman自身が作ってるのはyo。bowerはTwitter社が、GruntはBocoup社がメインで作っている。

ワークフローとしてはこうらしい

workflow

 yoでプロジェクトを作成し、bowerで依存性管理をし、gruntでビルド&テストをするという事だそうで。voloはこれらをひとつでやるけど、Yeomanは各種ツールが合体して一連のフローを提供する感じっぽい。


Yeomanを導入

 ではYeomanを導入してプロジェクトを作ってみる。yoもbowerもgruntもnpm経由でインストールするので環境ない人はこの辺りを参考に構築して下さい。ちなみにYeomanの1.0 BETAはWindowsではまだ動かないらしいのでMacかLinuxでやって下さい。


npm install -g yo grunt-cli bower


こんだけ。


Yeomanでプロジェクトを作ってみる

 yoコマンドでプロジェクトを作る。yoコマンドを実行したディレクトリに色々生成されるのでmkdirでディレクトリを予め作っとく。

mkdir sample

cd sample
yo webapp

 すると以下の様なのが出るので選択する。jQueryなどのモダンなjsはデフォで入るぽい。Sass使う?とかRequireJS使う?とか聞かれる。

     _-----_

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

Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.
Would you like to include Twitter Bootstrap for Sass? (Y/n) n
Would you like to include RequireJS (for AMD support)? (Y/n)

 とりあえずSassとかよーわからんので(知ってるけど)そこはnoにして、RequireJSについてはyesでやってみるとズギャーっと色々ダウンロードされる。詳しくは見てないけどpackage.jsonとcomponent.jsonを生成してnpm installとbower installをしているみたい。以下の様な構成でファイルが生成される。

.

├── Gruntfile.js
├── app
│   ├── 404.html
│   ├── components
│   ├── favicon.ico
│   ├── images
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   └── styles
├── component.json
├── node_modules
│   ├── bower
│   ├── grunt
│   ├── grunt-bower-requirejs
│   ├── grunt-concurrent
│   ├── grunt-contrib-clean
│   ├── grunt-contrib-coffee
│   ├── grunt-contrib-compass
│   ├── grunt-contrib-concat
│   ├── grunt-contrib-connect
│   ├── grunt-contrib-copy
│   ├── grunt-contrib-cssmin
│   ├── grunt-contrib-htmlmin
│   ├── grunt-contrib-imagemin
│   ├── grunt-contrib-jshint
│   ├── grunt-contrib-livereload
│   ├── grunt-contrib-uglify
│   ├── grunt-mocha
│   ├── grunt-open
│   ├── grunt-regarde
│   ├── grunt-requirejs
│   ├── grunt-rev
│   ├── grunt-svgmin
│   ├── grunt-usemin
│   └── matchdep
├── package.json
└── test
├── index.html
├── lib
└── spec

 デフォでcompassが入るんでRubyとCompassは入れとかないといけないっぽい。compass入ってなければgruntで色々やる前に入れておく。

sudo gem update --system

sudo gem install compass

 あとはgrunt buildだのgrunt testだのすればよい。


色んなプロジェクト

 npmで以下の様にgeneratorを探して入れたらyoで色んな種類のプロジェクトが作れるようです。AngularJSとかもある。結構色々出来そう。

npm search yeoman-generator

ft-wp Front-Trends Wordpress generator =hubertburdach 2013-03-30 21:08 yeoman-generator web app front-e
generator-angular Yeoman generator for AngularJS =sindresorhus =addyosmani =paulirish =btford 2013-04-08 03:21 yeoman-gen
generator-aura Yeoman generator for Aura.js =dotcypress 2013-03-03 15:58 yeoman-generator yeoman generato
generator-backbone Yeoman generator for Backbone.js =sindresorhus =addyosmani =paulirish 2013-04-13 22:07 yeoman-generator s
generator-backbone-amd generator-backbone-amd ====================== =abiee 2013-04-02 05:10 yeoman-generator yeoman generato
generator-barista Yeoman generator for Barista =trimeego 2013-03-26 17:43 yeoman-generator yeoman generato
generator-bbb Yeoman generator for Backbone Boilerplate =sindresorhus =addyosmani =paulirish 2013-04-13 23:29 yeoman-generator s
generator-boilerplate Yeoman Generator for ... =addyosmani 2013-04-17 15:04 yeoman-generator
generator-bookmarklet Bookmarklet Generator for Yeoman =passy 2013-03-01 23:25 yeoman-generator bookmarklet
generator-bootstrap Yeoman generator for Twitter Bootstrap =sindresorhus =addyosmani =paulirish =btford 2013-04-07 17:04 yeoman-gen
generator-buster generator-buster ================ =abiee 2013-04-02 05:05 yeoman-generator yeoman generato
generator-chrome-extension Yeoman generator for Chrome Extensions =sindresorhus =ragingwind =addyosmani =paulirish 2013-04-11 22:13 yeoman
generator-chromeapp Yeoman generator for Chrome App =sindresorhus =addyosmani =paulirish 2013-04-14 00:56 yeoman-generator s
generator-cityjs Yeoman generator for CityJS =dotcypress 2013-04-04 12:28 yeoman-generator yeoman generato
generator-closure Generator for Closure Library =thanpolas 2013-04-14 15:45 yeoman-generator yeoman generato
generator-cucumber Yeoman generator for Cucumber.js =lkanio 2013-02-17 21:34 yeoman-generator yeoman generato
generator-ember Yeoman generator for Ember =inkredabull =sindresorhus 2013-04-15 17:15 yeoman-generator scaffold ge
generator-footguard Yeoman generator for single page application =mazerte 2013-03-15 13:23 yeoman-generator yeoman generato
generator-foundation Yeoman generator for Stylus themes, especially zurb foundation CSS framework =brian.lai 2013-04-18 21:25 yeoman-generator yeoman gene
generator-generator Generator Generator for Yeoman =passy 2013-04-18 21:58 yeoman-generator
generator-genesis Yeoman Generator for Genesis Skeleton =ericclemmons 2013-03-17 03:28 yeoman-generator express skeleto
generator-h5bp HTML5 Boilerplate generator =sindresorhus 2013-04-13 23:57 yeoman-generator html boilerplat
generator-inuit inuit.css generator =kevva 2013-03-15 12:03 yeoman-generator inuit.css
generator-jasmine Yeoman generator for Jasmine =sindresorhus =addyosmani =paulirish 2013-04-15 19:34 yeoman-generator s
generator-karma Yeoman generator for Karma =sindresorhus =btford =paulirish =addyosmani 2013-03-21 07:17 yeoman-gen
generator-lessapp Edited default Yeoman generator for scaffolding out a front-end web app with Twitter Bootstrap in LESS =robinpokorny 2013-04-15 16:04
generator-maria A generator for Yeoman =revathskumar 2013-04-15 15:04 yeoman-generator MariaJS Boilerp


AngularJSで作ってみる

 せっかくなんでAngularJSのプロジェクト作ってみる。

npm install -g generator-angular 

 あとはyoでangularを指定。色々聞かれるんで全部yesにしてみた。

yo angular

Would you like to include Twitter Bootstrap? (Y/n) y
If so, would you like to use Twitter Bootstrap for Compass (as opposed to vanilla CSS)? (Y/n) y
Would you like to include angular-resource.js? (Y/n) y
Would you like to include angular-cookies.js? (Y/n) y
Would you like to include angular-sanitize.js? (Y/n) y

 このgeneratorは勝手にbower installとかしてくれないらしいんで、自分でやる

bower install

 すると以下の様になる

.

├── Gruntfile.js
├── app
│   ├── 404.html
│   ├── components
│   │   ├── angular
│   │   ├── angular-cookies
│   │   ├── angular-mocks
│   │   ├── angular-resource
│   │   ├── angular-sanitize
│   │   ├── angular-scenario
│   │   ├── es5-shim
│   │   └── json3
│   ├── favicon.ico
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   │   ├── app.js
│   │   └── controllers
│   ├── styles
│   │   ├── _compass_twitter_bootstrap.scss
│   │   ├── _compass_twitter_bootstrap_awesome.scss
│   │   ├── _compass_twitter_bootstrap_responsive.scss
│   │   ├── compass_twitter_bootstrap
│   │   ├── main.css
│   │   └── main.scss
│   └── views
│   └── main.html
├── component.json
├── package.json
└── test
├── runner.html
└── spec
└── controllers

 index.htmlを開くと以下の様に表示されます。リスト部分がng-repeatで動的に挿入されてるっぽいですね。

index.html


おわりに

 yoで良さげなプロジェクトテンプレを探して生成し、あとはcomponent.jsonやGruntfile.jsをいじって良い感じにしたらよさそう。generator-nodeとかgenerator-expressは無いのかと思ったらStackoverflowのYeoman and ExpressJSによると「Yeomanはフロントエンド用のツールじゃん?だからフロントエンドを生成するじゃん?nodeはバックエンドじゃん?」という事らしい。ごもっともだ。ただ将来的には両方いける口になりたいようです。

 AngularJSとかよーわからんしー、という人でもgeneratorで色々生成されるんでファイル見ながらふむふむ出来る。gruntとかまだ全然分かってないけど、generator周りも自分で作れそうだし、いいんじゃね。これ。Firefox OS系のアプリ作りでも十分使えると思う。ていうかgenerator-openwebapps作ろうかな