Yeomanのあれこれ

  • 339
    いいね
  • 2
    コメント
この記事は最終更新日から1年以上が経過しています。

はじめに

 僕は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作ろうかな