JavaScript (HTML5): Yeoman 導入

Yeoman とは

Yeoman (ヨーマン)とはタスク実行ツールとパッケージマネージャツール、さらにプロジェクトのひな形を作成するツールで構成された、JavaScript 統合ワークフローです。

タスク実行ツールは Grunt、パッケージマネージャは Bower、ひな形の作成は Yo を使用します。

Yo とは

Yo とは JavaScript プロジェクトのひな形の作成ツールです。

作成できるひな形の例)
・シンプルなウェブサイト
・AngularJS プロジェクト
・Chrome Extension
・様々な HTML5 アプリ
・Titanium プロジェクト
・Tumblr ページ
・ブックマークレット

$ npm search yeoman-generator

と打つと、ひな形の一覧を見ることができます。

Yo のインストール

ターミナルでインストールします。

$ [sudo] npm install -g yo

Bower や Grunt が入っていない場合はこちら。

$ [sudo] npm install yo bower grunt-cli -g

システムにインストールされました。

シンプルなウェブアプリプロジェクトのジェネレーターもついでにインストール。

$ [sudo] npm install -g generator-webapp

プロジェクトの作成

プロジェクトを作成したいディレクトリでコマンドをうちます

$ yo

を入力するとオッサンのドット絵と、下記質問がでますのでカーソルで移動で Run the Webapp generator に移動してエンターキーを押します。※ generator-webapp がインストールされている場合

[?] What would you like to do? 
  Run the Mocha generator (0.1.1) 
❯ Run the Webapp generator (0.4.3) 
  --------
  Update your generators 
  Install a generator 
  Find some help 
  Get me out of here!

HTML5Boilerplate+jQuery プロジェクトが生成されます。

ちなみにここまでは

$ yo webapp

でもできます。generator-webapp の「generator-」を省いた名前です。

あとは Sass あたりを入れます。

Out of the box I include HTML5 Boilerplate and jQuery.
[?] What more would you like? (Press  to select)
❯⬢ Bootstrap for Sass
 ⬢ RequireJS
 ⬢ Modernizr

Yo の指揮によって、Bower でライブラリが、Grunt でタスクが準備され、ウェブアプリのひな形が用意されました。

.
├── Gruntfile.js
├── app
│   ├── 404.html
│   ├── bower_components
│   ├── favicon.ico
│   ├── images
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   └── styles
├── bower.json
├── node_modules
│   ├── bower
│   ├── grunt
│   ├── grunt-autoprefixer
│   ├── grunt-bower-requirejs
│   ├── grunt-concurrent
│   ├── grunt-contrib-clean
│   ├── 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-requirejs
│   ├── grunt-contrib-uglify
│   ├── grunt-contrib-watch
│   ├── grunt-mocha
│   ├── grunt-modernizr
│   ├── grunt-rev
│   ├── grunt-svgmin
│   ├── grunt-usemin
│   ├── load-grunt-tasks
│   └── time-grunt
├── package.json
└── test
    ├── index.html
    ├── lib
    └── spec

ウェブアプリの起動

あとは grunt server で立ち上げられます。

$ grunt server

ブラウザが立ち上がってアプリが実行されています。

単に grunt コマンドを叩くとデフォルトのコマンドが実行され、ここではテストが実行されます。

$ grunt

デフォルトの 9000 番でテストアプリが立ち上がります。ブラウザで http://localhost:9000 を見てみましょう。
テストが行われて Success と表示されていれば、テスト成功です。

いずれも /dist フォルダができ、実際のリリース用に使用する index.html などが生成されています。