JavaScript
grunt
yeoman
backbone

Yeomanのgenerator-backboneを使って開発環境を作ったときの覚書

More than 3 years have passed since last update.

Backbone.jsあんまり需要がない?はさておき、備忘録なんでいいでしょ的な観点と、それ以外にもrequire.jsのコンパイル周りで引っかかったので。

今回のポイントは下記


  • compassを使いたい

  • require.jsを使いたい

  • r.jsでrequire.jsをコンパイルしたい


1. generatorを使ってbackbone環境をインストール

Yoの用意や、generatorのインストールは下記のURLを参照して作業

Backbone.js の開発環境を構築し MVCパターンで書いてみた

$ mkdir project

$ cd project
$ yo backbone

この時に、オプションの選択があり、

Use RequireJsを選択してインストール

$ grunt serve

もしくは

$ grunt test

で動作確認


2. compassの設定

$ npm install grunt-contrib-compass --save-dev

続いてGruntfileの編集

grunt.initConfigブロックに下記を追記


Gruntfile.js

compass: {

dev: {
options: {
http_path: "/",
cssDir: "app/styles/",
sassDir: "app/sass/",
imagesDir: "images/",
javascriptsDir: "javascripts"
}
}
}

さらに、grunt.initConfigのwatchに下記を追記


Gruntfile.js

compass: {

files: ['<%= yeoman.app %>/sass/{,*/}*.{scss,sass}' ],
tasks: ['compass']
}


3. require.jsのコンパイルの設定

コンパイルしたときにAMD機能を置き換えるalmond.jsをインストール

$ bower install almond --save-dev

generator-backboneのgruntファイルに含まれているuserminがrequire.jsのブロックに対応していないので、index.htmlに書かれているような下記の状態だとエラーでbuildできない


buildできない。usePrepareの際にエラーがでる

<!-- build:js scripts/main.js -->

<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->

Running "useminPrepare:html" (useminPrepare) task

Fatal error: require.js blocks are no more supported.

なので、buildのコメントアウトブロックを使用せず、require.jsのcompileを利用する。

Gruntfile.jsのgrunt.initConfigのrequirejsのブロックを下記のように変更


Gruntfile.js

requirejs: {

dist: {
options: {
almond: true,
wrap: true,
baseUrl: '<%= yeoman.app %>/scripts',
mainConfigFile: "<%= yeoman.app %>/scripts/main.js",
out: "<%= yeoman.dist %>/scripts/main.js",
name: 'main',
paths: {
'templates': '../../.tmp/scripts/templates',
'jquery': '../../<%= yeoman.app %>/bower_components/jquery/dist/jquery',
'underscore': '../../<%= yeoman.app %>/bower_components/lodash/dist/lodash',
'backbone': '../../<%= yeoman.app %>/bower_components/backbone/backbone'
},
include: ['templates','jquery','underscore', 'backbone'],
replaceRequireScript: [
{
files: ['<%= yeoman.dist %>/index.html'],
module: 'main',
modulePath: 'scripts/main'
}
]

}
}
}


依存するAMDやshimで設定しているものは適宜指定する必要あり

replaceRequireScriptで、コンパイルされた状態を読み込むscriptタグを指定したファイルに挿入するが、buildの時にエラーが発生(というか、requirejsのtaskの時に止まっちゃう。。)

どうも、copyのtaskが完了してからでないと正常に動作しないらしい。

https://github.com/yeoman/grunt-usemin/issues/192#issuecomment-33067828

というわけで、タスクの順番を変更


Gruntfile.js

grunt.registerTask('build', [

'clean:dist',
'createDefaultTemplate',
'jst',
'useminPrepare',
'imagemin',
'htmlmin',
'concat',
'cssmin',
'uglify',
'copy',
'requirejs', // 'copy'の下に配置
'rev',
'usemin',
'compass'
]);


以上。

これで正常に動作するはず。

今回、初yeoman、初grunt、初require.jsと初づくしな感じったが、いずれも便利な感じで驚愕。

とりあえず、タスクランナー最高。