Backbone.js + Handlebars.js をgulp.jsで結合、コンパイルする

Backbone.js + Handlebars.js をgulp.jsで結合、コンパイルする

なんか今更感がありますが、勉強がてら。以前、仕事でも使っていたBackbone.js + Handlebars.jsですが、今後業務で必要になるかもだし、復習がてらやってみようかなということで最近もっぱらBackboneばかりです。その際結合やコンパイルをgulpで自動化したのでそのまとめをしますね。あーReactも勉強したいー。

Gulp.jsについて

詳細なインストール方法などは今回は省きます。おそらくBackbone.js + Handlebars.jsあたり触るような人ならGulpくらいできそうなので・・・

もしわからない方がいらしたらGulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG この辺で確認してみてくださいね。

ディレクトリ構成

基本的にBackboneの構成でmodelやview、routerなどはディレクトリで分けた方が管理しやすいです。しかし、それだと幾つもjsファイルをhtmlなどに読み込まないといけないので、concatで結合します。

ディレクトリ構成は最小でこんな感じです。dev/js/templates.jsとdist/js/app.jsはgulpで生成されます。

├── dev
│   └── js
│       └── model
│   	└── view
│   	└── namespace.js
│   	└── templates.js //gulpで生成
└── dist
    └── js
    	└── app.js //gulpで生成

プラグインのインストール

今回必要なプラグインです。

  • gulp-concat
  • gulp-handlebars
  • gulp-wrap
  • gulp-declare
  • gulp-plumber
sudo npm install gulp-concat gulp-handlebars gulp-wrap gulp-declare gulp-plumber --save-dev

これでまとめてインストールできます。

namespace.jsについて

handlebarsをコンパイルする際に必要になるのでこちらのファイルを作ります。というのもgulp-handlebarsでhbsファイルをコンパイルする際に「namespace: ‘MyApp.Templates’」で名前空間を指定するんですね。

namespace.js

var MyApp = {
  Views: {},
  Collections: {},
  Models: {},
  Templates: {}
}

んで、js内でhoge.hbsテンプレートを呼び出す場合は

MyApp.Views.hogehoge = Backbone.View.extend({
    template: MyApp.Templates.hoge,

    initialize: function(){
    	this.render();
    },
    render: function() {
        this.$el.html(this.template());
        return this;
    }
});

こんな感じで呼び出せます。

gulpfile.js

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    handlebars = require('gulp-handlebars'),
    wrap = require('gulp-wrap'),
    declare = require('gulp-declare'),
    plumber = require("gulp-plumber");
 
gulp.task('js:hbs', function(){
  return gulp.src('templates/*.hbs')
    .pipe(handlebars())
    .pipe(wrap('Handlebars.template(<%= contents %>)'))
    .pipe(declare({
      namespace: 'MyApp.Templates',
      noRedeclare: true,
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('dev/js/'));
});


gulp.task('js:concat', function() {
  return gulp.src('dev/js/**/**.js')
    .pipe(plumber())
    .pipe(concat('app.js'))
    .pipe(gulp.dest('dist/js'));
});

gulp.task('default', function() {
    gulp.watch(['templates/*.hbs'], ['js:hbs']);
    gulp.watch(['dev/js/**/*.js'], ['js:concat']);
});
gulp

ターミナルでターン!であとはJSファイルが変更、新規作成されて保存されるたびに結合されたapp.jsが上書き生成されます。

※hbsのタスクはgulp-handlebarsをそのまま使ってます。

まとめ

最初は大変そうかなと思ってたんですけど、実際やってみると意外なほど簡単でした。今回は忘れないように記事させていただきましたが、これからBackbone
に挑戦する方の手助けになればなと思います。

さーてこれからサンプルでなんか作ろうかなー

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

同じカテゴリーの記事

ページの先頭へ