Help us understand the problem. What is going on with this article?

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

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

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

junzo
合同会社ワイヤーフレームズの代表社員をしています。
http://wire-frames.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした