How to use yoman, grunt, usemin 2 and requirejs?

Question

I am trying to wrap my head using Grunt, usemin 2, requirejs and uglify. What I observe in my assemblies is that requirejs does not include my dependencies in my only concatenated assembly file. When I run index.html from / dist, I see errors when searching for "jquery", "app" and some third-party js files, or sometimes "define not defined".

I read the following problems on grunt-usemin and removed the require blocks, but some questions still remain in these threads.

• Recommended Processing Method RequireJS, concat, uglify
• How to handle requirejs in version 2.0

I followed the search and came across this post How to integrate Yeoman and Requirejs , which called me there when I saw the Requirement Optimizer was launched, when I changed the use of grunt-contrib-requirejs to grunt-requirejs. Unfortunately, I still see these errors:

Uncaught ReferenceError: define is not defined.

I have the following in my index.html:

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

Here is my Grunt file: http://jsbin.com/futocusu/3/edit?js

Issue No. 112 spoke of the creation of an article on the use of Joman on this subject, but I do not think it has been written yet.

Has anyone figured out the best way to use usemin v2 with grunt and requirejs to output concat + uglify to a single file during assembly? I'm also not sure what the difference is in using grunt-contrib-requirejs and grunt-requirejs and when to use which one.

Answer 1

, 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). grunt, , , , , grunt:

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

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