Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@junzo

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

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

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

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

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

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
2
Help us understand the problem. What are the problem?