じわじわと広がりを見せる Yeoman ですが、大きく役割を変えてバージョン 1.0 に進みそうです。以前は GruntJS や Bower などを統合したツールでしたが、今後はこれらと協調して動作するための「雛形を生成するツール」になるようです。

ホームページでの紹介文も変わっています。

Yeoman 1.0 is more than just a tool. It's a workflow; a collection of tools and best practices working in harmony to make developing for the web even better.

また、コマンドライン上で利用するコマンドも yeoman から yo になります。 bower と grunt をラップしていた部分がなくなり、アプリケーションを書き始めるときの scaffolding のみを提供します。ホームページに３つの画像が並んでいることがこれらを象徴しています。

この記事では、 backbone.js を読み込む部分までを追ってみましょう。

セットアップ
サンプルプロジェクト
テストサーバ
ライブラリの追加
ビルド
終わりに

セットアップ

まずはツール類のインストールから始めましょう。最小構成は把握していませんが、手元の Mac では次のものはインストール済みとなっています。

NodeJS (各バージョンにおけるパッケージの安定性を考えると nvm を使った方が良い)
git
XCode (不要かも？)

インストールには npm を使います。以前は npm install yeoman でしたが、パッケージ名が yo に変わり、 grunt-cli と bower も明示的に指定するようになりました。 (パッケージ名が変わった点は非常にややこしいかもしれません)

$ npm install -g yo grunt-cli bower

yo コマンドを実行してみると、相変わらずのキャラクターが表示されます。

下の方には次のメッセージが出力されます。

Usage: yo  [arguments] [--help]

The webapp generator is bundled, while others can be installed with npm install 

Officially supported generators:
webapp angular ember backbone chromeapp chrome-extension bootstrap mocha jasmine testacular

See a list of all available generators with npm search yeoman-generator

Now just run yo webapp and have a great day :)

「ジェネレーター」という枠組みで新しく生まれ変わったことが分かります。公式にサポートされているジェネレーターも列挙されていますし、NPM に登録されているものも検索できます。デフォルトは generator-webapp ですが、それ以外にも次のようなものが見つかりました。用途に合わせてジェネレーターを切り替えましょう。

$ npm search yeoman-generator |awk '$1 != "NAME" { print $1; }'
generator-angular
generator-aura
generator-bookmarklet
generator-cucumber
generator-foundation
generator-generator
generator-h5bp
generator-inuit
generator-lessapp
generator-mobile-boilerplate
generator-mocha
generator-ozjs
generator-server-configs
generator-testacular
generator-travis-ci
generator-webapp
generator-wordpress
generator-yo-wordpress
imatic-stack
yeoman-generator

Windows でのインストール方法についてはこちらの記事（英語）が参考になると思います。テスト用のライブラリである mocha が依存する PhantomJS のインストールが大変なようです。

Getting Started With Yeoman 1.0 Beta on Windows

サンプルプロジェクト

それではサンプルプロジェクトを作ってみましょう。適当なディレクトリ (ここでは sandbox) を新規に作成し、そこで scaffolding コマンドである yo を実行します。「Twitter Bootstrap を含めるか？」「RequireJS を含めるか？」という２つの質問がありますが、どちらにも "Y" (「はい」) で答えておきましょう。

$ mkdir sandbox && cd sandbox
$ yo webapp

     _-----_
    |       |
    |--(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)
Would you like to include RequireJS (for AMD support)? (Y/n)
   create Gruntfile.js
   create package.json
   create .gitignore
   create .gitattributes
   create .bowerrc
   create component.json
   create .jshintrc
   create .editorconfig
   create app/favicon.ico
   create app/404.html
   create app/robots.txt
   create app/.htaccess
   create app/scripts/vendor/bootstrap.js
   create app/styles/main.scss
   create app/scripts/app.js
   create app/index.html
   create app/scripts/main.js
   create app/scripts/hello.coffee
   invoke   mocha:app
   create     test/index.html
   create     test/lib/chai.js
   create     test/lib/expect.js
   create     test/lib/mocha/mocha.css
   create     test/lib/mocha/mocha.js
   create     test/spec/test.js

I'm all done. Just run npm install && bower install to install the required dependencies.

様々なファイルが生成されますが、依存パッケージを記載したファイルが２つあります。

component.json : フロントエンド用のライブラリが記載されたファイル。jQuery など。 bower が参照する。
package.json : ビルドツールが記載されたファイル。grunt など。 npm が参照する。

それぞれがツールのデフォルトの設定ファイル名になっていますので、コマンドを叩いてインストールしておきましょう。追加で必要なライブラリがある場合は、後で追加した方が良いと思います。まだ安定版ではないためです。

$ npm install
$ bower install

.bowerrc があることで、ローカルファイルシステムにおける配置場所が components から app/components に変更されています。 Yeoman チームの人は Bower の開発にも貢献しているそうなので、こうした改善が進んでいるのだと思います。

.bowerrc

{
    "directory": "app/components"
}

なお、 npm が参照するパッケージのバージョンには注意が必要です。 Node v0.10 がリリースされたときに API の変更があったようで、コアライブラリとも言えるものがインストールできなくなり、芋づる式にインストールが失敗しました。手元で実行したときは PhantomJS をインストール出来ませんでしたが、unzip ライブラリがブロッカーになっていました。これらのチケットがクローズすれば v0.10 で Yeoman (がテンプレートを生成する Grunt v0.4) を使えるはずです。

PhantomJS install failed in MacOS 10.8.2 with node 0.10.0 and npm 1.2.14 (PhantomJS)
pullstream: 'callback' is not a function at _flush() (unzip)
Unzip stops prematurely in Node 0.10.0 (unzip)

手元の環境では nvm で Node のバージョンを切り替えて v0.8 系を使って進めます。

テストサーバ

セットアップが終わったらテストサーバを起動して動作を確認しましょう。以前のバージョンでは yeoman server でしたが、今回からは Gruntfile.js が充実したので grunt で完結するようになりました。

実際にテストサーバを起動してみましょう。

$ grunt server

coffee と compass、それから livereload などのタスクが実行され、ブラウザが開きます。テストサーバは9000番ポートで起動していますので、そこを指してくれます。コンソール出力を読んでおくと、 watch タスクによってファイルの変更が監視されていることも分かりますね。

ライブラリの追加

引き続き、Backbone.js を使えるようにします。 Backbone.js と Underscore.js は AMD 非対応ですので、 amdjs のコミュニティビルドを使います。 bower で検索すると見つかりますので、 --save オプションを付けてインストールします。（手動で component.json を編集しても構いません）

$ bower search backbone |grep amd
  - backbone-amd git://github.com/amdjs/backbone
  - backbone-amd-lodash git://github.com/nibblebot/backbone.git

$ bower search underscore |grep amd
  - underscore-amd git://github.com/amdjs/underscore.git

$ bower install backbone-amd --save
$ bower install underscore-amd --save

app/components 配下に backbone-amd/ と underscore-amd/ が追加されているはずです。

続いて requirejs の設定を修正し、最も簡単な呼び出しコードを記述します。

paths でファイルパスを指定する。拡張子 (.js) は付けない。
shim で依存性を指定する。Backbone.js は Underscore.js に依存している。
実際に Backbone を呼び出すコードを記述する。疎通確認をとりたいだけなので、コンソールに出力する。

app/scripts/main.js

  require.config({
      paths: {
          jquery: '../components/jquery/jquery',
          bootstrap: 'vendor/bootstrap',
          underscore: '../components/underscore-amd/underscore',
          backbone: '../components/backbone-amd/backbone'
      },
      shim: {
          bootstrap: {
              deps: ['jquery'],
              exports: 'jquery'
          },
          backbone: {
              deps: ['underscore'],
              exports: '_'
          }
      }
  });

  require(['app', 'jquery', 'backbone', 'bootstrap'], function (app, $, Backbone) {
      'use strict';
      // use app here
      console.log(app);
      console.log('Running jQuery %s', $().jquery);
      console.log(Backbone);
  });

後は Backbone.js のお作法で実装を進めていきます。 livereload が設定されているだけでも開発効率がアップしたような気がすると思います。なお、Backbone.js の Collection で fetch を使うなど、XHR の通信も必要な場合には依存性に jQuery を追加しておきましょう。

ビルド

ある程度の実装が終わったら grunt でビルドします。 JavaScript/CSS のミニフィケーションもタスクに含まれていますので、フロンエンド実装後の統合作業も簡単に進められるはずです。ビルド成果物は dist ディレクトリにまとめられ、以下のファイルレイアウトになります。

dist
  |--- 404.html
  |--- favicon.ico
  |--- index.html
  |--- robots.txt
  |--- components/
  |      | requirejs
  |      `--- require.js
  |--- scripts/
  |      |--- main.js
  |      `--- vendor
  |             `--- modernizr.js
  `--- styles
         `--- main.css

あとは rsync などで適当な場所に配置しましょう。 grunt-rsync の利用を検討するのも良いでしょう。

終わりに

去年の10月の記事で紹介した内容とはガラッと変わったようです。ツール同士が粗結合になって個別に開発を進められる、という点は近年の開発スタイルにマッチしていると思います。セットアップも以前より簡単になっていると思いますので、そろそろ人に勧めても良さそうです。 Grunt にも初期セットアップ用のライブラリとして grunt-init がありますが、これが Yeoman で置き換えられることは v0.4 のリリース時点 (Tearing Grunt Apart) でも触れられています。Yeoman 1.0 のリリースまでには Windows サポートも視野に入っている点も嬉しいですね。それと何より、Yeoman って何？というボヤッとした状況から位置づけがはっきりしたのではないでしょうか。

Yeoman を使ってみる (2012年10月)

最後に、記事で紹介したコマンドをまとめておきます。ツールのセットアップとライブラリの依存関係がスムーズに解決できれば、これでWebアプリを実装し始められるでしょう。

$ npm install -g yo grunt-cli bower    # ツールのインストール
$ mkdir sandbox && cd sandbox          # プロジェクトディレクトリの作成
$ yo webapp                            # 雛形の生成 (scaffolding)
$ npm install                          # grunt などのインストール
$ bower install                        # jQuery などのインストール
$ bower install backbone-amd --save    # Backbone.js (AMD)
$ bower install underscore-amd --save  # Underscore.js (AMD)
$ grunt server                         # テストサーバの起動
$ grunt                                # パッケージング

Ars longa, vita brevis

2013年3月21日

Yeoman 1.0 Beta を使ってみる

セットアップ

サンプルプロジェクト

テストサーバ

ライブラリの追加

ビルド

終わりに

0 件のコメント:

自己紹介