Edited at

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

More than 3 years have passed since last update.

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を使えば、困ることはありません。むしろ、細かなオプションが利用できるので、そのまま使う方がよさそうです。