如何使用yeoman、grunt、usemin 2和requirejs？

我正试着用Grunt、usemin 2、requirejs和uglify把我的脑袋绕过去。我在构建中观察到的是，requirejs没有将依赖项正确地包含到我的单个连接构建文件中。当我在/dist外运行index.html时，我在查找“jquery”、“app”和一些第三方js文件时会看到错误，有时还会看到“define is not defined”

我阅读了关于grunt usemin和删除require块的以下问题，但这些线程中仍然存在一些问题

我继续我的搜索，发现了这篇文章，这让我看到了当我从使用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文件：

第112期曾讨论过关于在这个话题上写一篇关于使用约曼的文章，但我认为还没有人写过

---

有没有人想出了使用usemin v2和grunt和requirejs在构建时输出到单个concat+uglify文件的最佳方法？我也不确定使用grunt contrib requirejs和grunt requirejs有什么区别，以及何时使用哪一个。

看起来您似乎试图在main.js上做得太多了

我在grunfile.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
    ]);

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"
                    }
                ]
            }
        }
    };
};

下面是每个相关的Grunt任务（对我来说，这些任务存储在单独的文件中，因为我使用load Grunt config）。如果要在GrunFile中使用这些，则只需获取返回对象中的所有内容，并将其粘贴到GrunFile中的任务值中：

复制

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

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']
            }
        }
    };
};

requirejs

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
    ]);

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"
                    }
                ]
            }
        }
    };
};

concat

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 {
        main: {
            cwd: 'src/',
            src: '**',
            dest: 'dist/',
            expand: true,
            flatten: false
        },
    };
};

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']
            }
        }
    };
};

usemin

module.exports = function (grunt, options) {
    return {
        html: [            
            'src/path/to/index.html'
        ]
    };
};