Blogブログ

Day: February 19, 2014

Backbone で Handlebars

Backbone.jsのテンプレートにHandlebarを使います。 ただ、Handlebarで問題となるのがコンパイル前の遅さ。 それを補うために、Gruntを使ってプリコンパイルする手法があります。 そのためには.hbsという拡張子でテンプレートファイルを作成して、この内容をgrantを使いtemplate.jsに随時反映させるのが便利です。 先ずはGruntの設定。 Gruntについてはこちら。 Grunt.js コマンドを開き、作業ディレクトリまで進みます。 cd /yourapps/dir/ イニシャライズを行います。 npm init これでpackage.jsonが生成されました。 次にgruntをインストールします。 npm install grunt –save-dev これでnode_modulesというフォルダが生成されました。 次に、プラグインを入れてみます。 package.jsonを編集します。 プラグインはgrunt-contribを使ってみます。 grunt-contribについての詳しい説明はこちら。 grunt-contrib 今回はhandlebarの自動プリコンパイルが目的ですが、それ以外にもcssやjsの圧縮など、便利な機能がたくさんあります。 少し時間がかかるかも知れませんが、一気に入れるには以下のコマンドを実行します。 npm install grunt-contrib –save-dev 個別に入れる場合は、 npm install grunt-contrib-handlebars –save-dev や、 npm install grunt-contrib-watch –save-dev このようにします。 使いなれて、好きなものだけ入れるためには、package.jsonを使うのが便利です。 一度、node_modulesのフォルダを削除します。 そして、devDependencies の項目に、 “devDependencies”: { “grunt”: “~0.4.1”, “grunt-contrib-watch”: “~0.3.1”, “grunt-contrib-cssmin”: “~0.4.2” } […]