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


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


今回のポイントは下記

* compassを使いたい
* require.jsを使いたい
* r.jsでrequire.jsをコンパイルしたい

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

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

[Backbone.js の開発環境を構築し MVCパターンで書いてみた](http://qiita.com/hkusu/items/6cab9b5e4ccf75901b4e)


```
$ mkdir project
$ cd project
$ yo backbone
```

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

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

```
$ grunt serve
```

もしくは

```
$ grunt test
```

で動作確認


##2. compassの設定

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

続いてGruntfileの編集

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

```javascript:Gruntfile.js
compass: {
    dev: {
        options: {
            http_path: "/",
            cssDir: "app/styles/",
            sassDir: "app/sass/",
            imagesDir: "images/",
            javascriptsDir: "javascripts"
        }
    }
}
```

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

```javascript: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できない

```xml: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のブロックを下記のように変更

```javascript: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


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

```javascript: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と初づくしな感じったが、いずれも便利な感じで驚愕。

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