4

Grunt、usemin 2、requirejs、および uglify を使用して頭を包み込もうとしています。ビルドで観察しているのは、requirejs が依存関係を単一の連結ビルド ファイルに適切に含めていないことです。/dist から index.html を実行すると、「jquery」、「app」、および一部のサード パーティの js ファイルを探すときにエラーが表示されるか、「define が定義されていません」というメッセージが表示されることがあります。

grunt-usemin と require ブロックの削除に関する次の問題を読みましたが、これらのスレッドにはまだいくつかの質問が残っています。

検索を続けたところ、この投稿How to integrate Yeoman and Requirejsに出くわしました。これは、grunt-contrib-requirejs の使用から grunt-requirejs の使用に変更したときに Requirejs オプティマイザーが実行されているのを見たという点で、私をそこに導きました。残念ながら、まだ次のエラーが表示されます。

Uncaught ReferenceError: define is not defined.

私のindex.htmlには次のものがあります。

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

これが私のGruntファイルです：http://jsbin.com/futocusu/3/edit?js

第 112 号で、このトピックに関する Yeoman の使用に関する記事を作成するという話がありましたが、まだ書かれていないと思います。

ビルド時に単一の concat+uglify ファイルに出力するために、grunt と requirejs で usemin v2 を使用する最良の方法を見つけた人はいますか? また、grunt-contrib-requirejs と grunt-requirejs を使用する際の違いと、いつどちらを使用するかについてもわかりません。

4

1 に答える 1

0

main.js でやりすぎているように見えます。

Gruntfile.jsに次のビルド タスクがあります。

grunt.registerTask('build', [
        'copy', // copies the src directory to dist (htdocs)
        'requirejs', // do an r.js build to concat modular dependencies
        'concat:head', // concats js in the head
        'uglify:head', // compresses js in the head
        'uglify:foot', // compresses js in the foot
        'cssmin', // minifies and concats css
        'usemin', // runs through html and inputs minified js and css
        'clean:afterBuild' // deletes files that are not required for build
    ]);

関連する各 Grunt タスクを次に示します (私の場合、load-grunt-config を使用しているため、これらは別のファイルに保存されています)。これらを gruntfile で使用したい場合は、返されたオブジェクトに含まれるすべてのものを取得し、それを gruntfile のタスク値に貼り付けるだけです。

コピー

module.exports = function (grunt, options) {
    return {
        main: {
            cwd: 'src/',
            src: '**',
            dest: 'dist/',
            expand: true,
            flatten: false
        },
    };
};

requirejs

module.exports = function(grunt, options) {
    return {
        compile: {
            options: {
                appDir: "src/to/require/app",
                baseUrl: "./",
                mainConfigFile: "src/to/require/app/common",
                dir: "dist/to/require/app",
                // build a common layer
                modules: [
                    {
                        "name": "common"
                    }
                ]
            }
        }
    };
};

連結

module.exports = function (grunt, options) {
    return {
        head: {
            /* other stuff */
        },
        foot: {
            src: [
                'dist/to/require/app/some_other_js.js',
                'dist/to/require/app/external/require.js',
                'dist/to/require/app/external/require.text.js',
                'dist/to/require/app/common.js'
            ],
            dest: 'src/to/require/app/compiled_footer_js.js',
        }
    };
};

醜くする

module.exports = function (grunt, options) {
    return {
        head: {
            /* other stuff *
        },
        foot: {
            files: {
                'src/to/require/app/compiled_footer_js.min.js': ['src/to/require/app/compiled_footer_js.js']
            }
        }
    };
};

ユーミン 

module.exports = function (grunt, options) {
    return {
        html: [            
            'src/path/to/index.html'
        ]
    };
};
于 2015-02-22T22:27:27.667 に答える