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

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

今回のポイントは下記

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

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

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

$ 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が完了してからでないと正常に動作しないらしい。

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

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

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