[CI][DevOps] Yeomanでフロントエンド自動リロード

By |8月 15, 2013|CI, DevOps, Javascript, Node.js, |0 comments


YeomanはGruntとBowerを内包するツールで、Yeoman自体はアプリケーションのひな形を作成するscaffoldingを提供するツールであり、Gruntは[salesforce][DevOps][CI] Grunt(grunt-force)を使ってforce.comへデプロイでご説明した通りビルドツール、BowerはJavascriptライブラリを管理するツールです。

それぞれ独立して開発されていてYeomanからGruntもBowerも扱えるようなイメージです。

まず、Yeomanが必要とするCompassをgemでインストールします。

$ gem install compass

次にYeomanをnpmでインストールします。

$ npm install -g  bower grunt-cli yo

続いて適当なディレクトリを作成しアプリケーションのひな形を作成します。BootstrapやRequireJSの利用など選択肢が表示されますので必要なものにチェックをつけてenterします。

$ mkdir sample
$ cd sample
$ yo webapp

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

Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.
[?] What more would you like? (Press <space> to select)
 ❯⬢ Twitter Bootstrap for Sass
  ⬢ RequireJS
  ⬢ Autoprefixer for your CSS
   create Gruntfile.js
   create package.json
...

少し時間がかかりますが、これだけで開発に必要な構成を構築できます。ちなみにyo webappのwebappはひな形の種類を指していて以下のコマンドで他に公開されているひな形を探すことが可能です。

$ npm search yeoman-generator
npm http GET https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1376045663696
npm http 200 https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1376045663696
NAME                  DESCRIPTION                                                   AUTHOR                DATE              VERSION
calaxa                calaxa ======                                                 =apathetic            2013-05-14 09:11  0.0.1
ft-wp                 Front-Trends WordPress generator                              =hubertburdach        2013-03-30 21:08  0.0.1
generator-angular     Yeoman generator for AngularJS                                =sindresorhus =addyosmani =paulirish =btford =pa
generator-angular-component A generator for Yeoman                                  =mgcrea               2013-07-11 17:08  0.2.1
...

希望のひな形をインストールする際は以下のようにnpmでインストールします。

$ npm install -g generator-webapp

環境によっては上記のようにスムーズに行かない場合があります。yo webappとしても「webappなんてひな形はない」と怒られて、webappのひな形をインストールしようとしてもエラーになる。そればかりか他のひな形もインストールできない。そういう状況は、ひとまずnodeとnpmのバージョンを上げて解決できました。以下のバージョンであれば、とりあえずうまく行ってます。

$ node -v
v0.10.15
$ npm -v
1.3.7

少し脱線しましたが、最後にHow do I install and use the browser extensions?にLiveReload用の拡張機能がありますので希望のブラウザのものを選択します。拡張機能をインストール後にアプリケーションディレクトリでgrunt serverとすると、Gruntfile内のserver起動タスクが実行されブラウザにアプリケーションが実行/表示されます。

$ grunt server
Running "server" task

Running "clean:server" (clean) task

Running "concurrent:server" (concurrent) task

    Running "copy:styles" (copy) task

    Done, without errors.

    Running "coffee:dist" (coffee) task
    File .tmp/scripts/hello.js created.

    Done, without errors.

    Running "compass:dist" (compass) task
    directory .tmp/styles/
       create .tmp/styles/main.css

    Running "compass:server" (compass) task
    unchanged app/styles/main.scss

    Done, without errors.

Running "autoprefixer:dist" (autoprefixer) task
File ".tmp/styles/main.css" created.

Running "connect:livereload" (connect) task
Starting connect web server on localhost:9000.

Running "open:server" (open) task

Running "watch" task
Waiting...

Webアプリケーション実行/表示

これで何かファイルを編集して保存するだけでブラウザの更新を行うこともなく変更が反映されるようになります。

ファイル編集後

こんな感じ(と言っても画像じゃわかりませんが…)

このようにファイル編集によって自動リロードされますので、GruntファイルにJSやCSSのビルドをきちんと記述していれば、Javascriptの構文チェックやCoffeescriptやTypescriptからのJavascriptファイル生成、JSファイルの結合/圧縮、less/scss (sass) + compassでCSSを生成など面倒なことは全てYeomanにお任せです。

ちなみに自分用のアプリケーションのひな形を登録したり公開することも可能ですのでforce.com開発用のひな形などにも挑戦してみると良いかもしれません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です