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

Question

I'm trying to wrap my head around using Grunt, usemin 2, requirejs, and uglify. What I'm observing in my builds is that requirejs is not properly including my dependencies into my single concatenated build file. When I run index.html out of /dist, I see errors when looking for 'jquery', 'app', and some third party js files or sometimes "define is not defined".

I read the following issues on grunt-usemin and removing the require blocks, but some questions still remain in those threads.

• Recommended way to handle RequireJS, concat, uglify
• How to handle requirejs in v2.0

I followed up my search and came across this post How to integrate Yeoman and Requirejs, which sort of got me there in that I saw the Requirejs optimizer running when I changed from using 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

There was talk in issue #112 about creating an article on using Yeoman on this topic, but I don't think it's been written yet.

Has anyone figured out the best way to use usemin v2 with grunt and requirejs to output to a single concat+uglify file on build? 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

It looks as though you are trying to do too much with main.js.

I have the following build tasks in 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
    ]);

Here are each of the relevant Grunt tasks (for me these are stored in separate files because I use load-grunt-config). If you would like to use these in your gruntfile then all you need to do is grab everything that is in the returned object and stick that in your task value in your gruntfile:

copy

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

uglify

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