How to have multiple output files in gruntfile.js when running requirejs

Question

In Gruntfile.js for grunt-contrib-requirejs I can only register one task and I can only have one output file i.e. home_scripts.pack.js. However, I want to have as many as I want output files based on different 'include' criteria. For example, home_scripts.pack.js, checkout_scripts.pack.js, product_scripts.pack.js etc. This way each page will only load JS that is using:

This is invalid, however I want to do something similar:

requirejs: {
    compile1: {
        options: {
            baseUrl: 'C:/project/js',
            mainConfigFile: 'C:/project/js/app.js',
            name: 'app',             
            paths: {
                requireLib: 'C:/project/js/require.min' 
            },
            *include: ['requireLib', 'home_page_internal.js'],*
            *out: 'C:/project/js/home_scripts.pack.js'*
            }
        }
    },
    compile2: {
        options: {
            baseUrl: 'C:/project/js',
            mainConfigFile: 'C:/project/js/app.js',
            name: 'app',             
            paths: {
                requireLib: 'C:/project/js/require.min' 
            },
            *include: ['requireLib', 'checkout_internal.js'],*
            *out: 'C:/project/js/checkout_scripts.pack.js'*
            }
        }
    }
}

The code with asterisk above is the code I want to generate output files different for each page. However, if there is a more efficient way to generate and load large number of JS plugin files and modules through requireJS optimizer using grunt, I'm open to suggestions.

Thanks,

Vishwanath · Answer 1 · 2015-02-13T07:45:28.623

You need to take a look at RequireJS Multipage Example

It depicts how to use concatenation on basis of need of the page.

So your options will look like.

requirejs : {
  compile : {
    "baseUrl": "app",
    "dir": "app/built",
    "include": "main.js",
    "paths": {
        "angular": "bower_components/angular/angular.min",
        "css" : "bower_components/require-css/css.min",
        "text" : "bower_components/requirejs-text/text",
        "css-builder" : "bower_components/require-css/css-builder",
        "normalize" : "bower_components/require-css/normalize"
    },
    "modules" : [
        {
            "name" : "app",
            "include" : ["text", "css"]
        },
        {
            "name" : "modules/module1",
            "include" : [],
            "exclude" : ["app"]
        },
        {
            "name" : "modules/module2",
            "include" : [],
            "exclude" : ["app"]
        },
        {
            "name" : "modules/module3",
            "include" : [],
            "exclude" : ["app"]
        }    ]
    }
}

Ignore other config and check modules config. It's an array which takes multiple AMD module and each will be concatenated in its own file.

In case of SPA, if you need to exclude any common modules which you dont want to be included in subsequent modules. In this case app module incorporates all the library layer and hence it is excluded from the subsequent modules.

How to have multiple output files in gruntfile.js when running requirejs

1 Answers1