Webアプリケーションを作る入門的なジェネレータ generator-backbone を紹介します。このエントリーは「YEOMAN Advent Calendar 2014」12月3日の記事です。
YEOMAN Advent Calendar 2014 - Adventar
インストールから実行まで
インストール
いつものようにジェネレータをインストールしてプロジェクトディレクトリを作りyoとgruntの実行です。
$ npm install -g generator-backbone $ mkdir backbone && cd $_ $ yo backbone $ grunt serve
途中オプションを聞いてきます。個人的にはBackboneを使うときはCoffeeScriptとRequireJSは必須にしています。
Out of the box I include HTML5 Boilerplate, jQuery, Backbone.js and Modernizr. ? What more would you like? (Press <space> to select) ❯◉ Twitter Bootstrap for Sass ◯ Use CoffeeScript ◯ Use RequireJs
実行
すべてのオプションを有効にした場合の実行結果は次の通りです:
bower でインストールされているモジュールは次の通り。
"bootstrap-sass-official": "~3.2.0", "jquery": "~2.1.0", "lodash": "~2.4.1", "backbone": "~1.1.0", "requirejs": "~2.1.10", "requirejs-text": "~2.0.10", "modernizr": "~2.7.1"
grunt タスクは色々あります。generator-webappと同様に開発リソール(.html/.js/.sassなど)を監視するwatch、JavaScriptテスティングフレームワークのmocha、ミニファイでは svgminなどなどWebアプリケーションを開発するための道具がひと通り揃ってます:
"apache-server-configs": "^2.8.0", "grunt": "^0.4.5", "grunt-contrib-copy": "^0.5.0", "grunt-contrib-concat": "^0.5.0", "grunt-contrib-coffee": "^0.11.0", "grunt-contrib-jst": "^0.6.0", "grunt-contrib-uglify": "^0.6.0", "grunt-contrib-compass": "^1.0.1", "grunt-contrib-jshint": "^0.10.0", "grunt-contrib-cssmin": "^0.10.0", "grunt-contrib-connect": "^0.8.0", "grunt-contrib-clean": "^0.6.0", "grunt-contrib-htmlmin": "^0.3.0", "grunt-contrib-imagemin": "^0.8.1", "grunt-contrib-watch": "^0.6.1", "grunt-mocha": "^0.4.11", "grunt-usemin": "^2.4.0", "grunt-bower-requirejs": "^1.1.0", "grunt-requirejs": "^0.4.2", "grunt-rev": "^0.1.0", "grunt-open": "^0.2.3", "load-grunt-tasks": "^0.6.0", "connect-livereload": "^0.4.0", "time-grunt": "^1.0.0", "jshint-stylish": "^1.0.0"
サブジェネレータ
YEOMANテンプレートのコマンドとして各コンポーネントを生成するサブジェネレータも用意されています:
yo backbone:router <router> yo backbone:collection <collection> yo backbone:model <model> yo backbone:view <view>
yo backbone:router
routerを作成します。
$ yo backbone:router main create app/scripts/routes/main.coffee $
作られるファイルは
define [ 'backbone' ], (Backbone) -> class MainRouter extends Backbone.Router routes: {}
yo backbone:view
viewとejsを作成します。
$ yo backbone:view main create app/scripts/templates/main.ejs create app/scripts/views/main.coffee $
作られるビューは
define [ 'jquery' 'underscore' 'backbone' 'templates' ], ($, _, Backbone, JST) -> class MainView extends Backbone.View template: JST['app/scripts/templates/main.ejs'] tagName: 'div' id: '' className: '' events: {} initialize: () -> @listenTo @model, 'change', @render render: () -> @$el.html @template(@model.toJSON())
ejsは
<p>Your content here.</p>
yo backbone:collection
collectionを作成します。
$ yo backbone:collection main create app/scripts/collections/main.coffee
作られるファイルは
define [ 'underscore' 'backbone' 'models/Main-model' ], (_, Backbone, MainModel) -> class MainCollection extends Backbone.Collection model: MainModel
yo backbone:model
modelを作成します。
$ yo backbone:model main create app/scripts/models/main.coffee $
作られるファイルは
define [ 'underscore' 'backbone' ], (_, Backbone) -> 'use strict'; class MainModel extends Backbone.Model url: '', initialize: () -> defaults: {} validate: (attrs, options) -> parse: (response, options) -> response
最後に
だいぶお世話になったジェネレータです。久しぶりに触りましたが少しづつではありますがサブジェネレータが修正されているようです。機会があったらまた触れてみたいジェネレータです。