Backbone.MarionetteアプリをBrowserifyでバンドルする(Gulp編）

Backbone.MarionetteとHandlebarsを使ったアプリをBrowserifyでバンドルするメモです。

フレームワークやライブラリとアプリを分離してバンドルします。

gulpfileはCoffeeScriptで記述しています。

package.json

browserifyのトランスフォームの指定

Handelbarsのトランスフォームを指定します。
タスクで設定できそうなのに、package.jsonで指定しないと動作しませんでした。
私が何か間違っているかもです。

  "browserify": {
    "transform": [
      "hbsfy"
    ]
  }

フレームワーク

"jquery": "~2.1.1",
"underscore": "~1.7.0",
"backbone": "~1.1.2",
"backbone.marionette": "~2.3.0",
"handlebars": "^2.0.0"

Gulp

"gulp": "^3.8.10",
"coffee-script": "^1.8.0",
"gulp-coffee": "^2.2.0",
"gulp-rename": "^1.2.0",
"vinyl-source-stream": "^1.0.0"
"browserify": "^8.0.2",
"hbsfy": "^2.2.1",

gulpfile.coffee

vendor.jsには、jquery,underscore,backbone,backbone.marionette,handlebarsをバンドルします。
app.jsにはアプリケーションとhandlebarsのテンプレートをバンドルします。

browserifyのバンドルを分離するためにrequireとexternalを使っています。
requireはaliasの設定も兼ねています。

browserifyタスク

dir =
  src: "./assets"
  hbs: "./template"
  dst: "./public/assets"

gulp.task 'vendor.js', ->
  browserify
    entries: ["#{dir.src}/js/vendor.js"]
    require: [
      'jquery'
      'underscore'
      'backbone'
      'backbone.marionette'
      'handlebars'
    ]
  .bundle()
  .pipe(source "vendor.js")
  .pipe(gulp.dest("#{dir.dst}/js"))

gulp.task 'app.js', ->
  browserify
    entries: [
      "#{dir.src}/js/boot.js"
      "#{dir.src}/js/app.js"
      "#{dir.hbs}/template1.hbs"
      "#{dir.hbs}/template2.hbs"
    ]
  .require("#{dir.src}/js/app.js", {expose: 'nzkc/app'})
  .require("#{dir.hbs}/template1.hbs", {expose: 'app/template/template1'})
  .require("#{dir.hbs}/template2.hbs", {expose: 'app/template/template2'})
  .external([
    'jquery'
    'underscore'
    'backbone'
    'backbone.marionette'
    'handlebars'
  ])
  .bundle()
  .pipe(source "app.js")
  .pipe(gulp.dest("#{dir.dst}/js"))

gulp.task 'browserify', ['vendor.js', 'app.js']

vendor.js

vendor.jsは以下のとおりです。

var Backbone = require('backbone');
Backbone.$ = require('jquery');
require('backbone.marionette');

Gruntより簡単に書けて、速いですね。
いくつものフィルタを通すことが多いですから、pipeは助かります。

各ファイルの指定を一つずつやっているところは改善したいところです。

gulp-browserifyはblacklistedされて、アップデートも止まっていますが、直接browserifyを使えば、困ることはありません。むしろ、細かなオプションが利用できるので、そのまま使う方がよさそうです。