grunt-contrib-requirejs - need a little advice

Question

I have a project with the following structure:

project
  |──css
  |──img
  |──js
     |──app
         |──collections
         |──models
         |──views
     |──vendor
         |──jquery
         |──backbone
         |──underscore
         |──require
     app.js
  index.html
Gruntfile.js
package.json

I'm trying to use grunt-contrib-requirejs to build the project into a www folder but I'm not having a lot of luck. The www folder is pretty straight forward - it should look like this:

www
  |──css
  |──img
  |──js
      |──optimized.js
index.html

Where optimized.js is the build from the require. It should include everything from the app folder, vendor folder, and app.js

right now my Gruntfile.coffee looks like this:

requirejs: 
   compile: 
      options:
     mainConfigFile: 'project/js/config.js'
     baseUrl: 'project/js'
     name: 'app'
     include: ['config']
     out: 'www/js/optimized.js'
     optimize: 'none'

and my config.js file looks like this:

requirejs.config({
    baseUrl: 'js',
    paths: {
        app: 'app',
        models: 'app/models',
        collections: 'app/collections',
        views: 'app/views'
    }
});

When I run the grunt task it doesn't give me an error - but the output doesn't include everything from the project/js folder?

Any help would be greatly appreciated!

Thanks!

What dependencies are listed in your console under your app? RequireJS will only include dependencies when they're listed in the dependency arrays OR when explicitly configuring dependencies to be included. — thomaux
Anzeo - paths: { app: 'app', views: 'app/views', collections: 'app/collections', models: 'app/models', googUrl: 'apis.google.com/js/client' } — pixelworlds
Did you manage to fix this? I'm having the same issue, and the answer below isn't helping. — callumacrae

Per Per · Accepted Answer · 2016-09-30T13:49:51

I dont think the accepted answer is of use. I know its an old question but I ran into the same problems so here is my solution, not for the thread starter but for people in the same situation.

The main problem you probably have is that your require-files are setup in the wrong way. The reason why the grunt job doesnt include all files is most likely because the files aren't properly required or defined. It has nothing todo with the grunt job.

It's not enough to have a config file (app.js in your case), you also need to require the files. For example you can do that in a main.js file:

require(["global","highcharts-chartdata"], function () {});

Please have a look at my setup that works. This is the folder structure:

Project
| 
├───dist
|   ├───css
|   |   bundle.css
|   ├───fonts
|   ├───images
|   └───js
|       bundle.js
|   index.html
|
└───src
    ├───js
    │   └───vendor
    │       ├───bootstrap
    │       ├───highcharts
    │       ├───jquery
    │       └───require
    |           require.js
    |   charts.js
    |   global.js
    |   main.js
    |   require.config.js
    └───less
        ├───bootstrap
        │   └───mixins
        ├───bootstrap_overrides
        └───font-awesome
gruntfile.js

This is my gruntfile:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),    
    jshint: {
      files: ['src/js/*.js'],
      options: {
        globals: {
          $: false,
          console: true,
          module: true,
          document: true
        }
      }
    },
    less: {
      compile: {
        options: {
          paths: ['src/less'],
          plugins: [
            new (require('less-plugin-autoprefix'))({browsers: ["last 2 versions"]}),
            new (require('less-plugin-clean-css'))
          ]
        },
        files: {
          'dist/css/bundle.css': 'src/less/style.less'
        }
      }
    },
    requirejs: {
      compile: {
        options: {
          baseUrl: "src/js",
          mainConfigFile: 'src/js/require.config.js',
          paths: {
            requireLib: "vendor/require/require"
          },
          include: "requireLib",
          name: "require.config",
          out: "dist/js/bundle.js"
        }
      }
    },
    watch: {
      files: ['src/js/*.js','src/less/**/*.less'],
      tasks: ['jshint','less','requirejs']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-requirejs');

  // Default task(s).
  grunt.registerTask('default', ['jshint','less','requirejs']);

};

This is the require.config-file:

requirejs.config({
    baseUrl: 'js',
    paths: {
        "jquery": "vendor/jquery/jquery",       
        "jquery-ui": "vendor/jquery/jquery-ui",
        "bootstrap-collapse": "vendor/bootstrap/collapse",
        "bootstrap-transition": "vendor/bootstrap/transition",
        "highcharts": "vendor/highcharts/highcharts-4.1.4.min",
        "highcharts-chartdata": "charts"
    },
    shim: {
        "bootstrap": ["jquery"],
        "jquery-ui": ["jquery"], 
        "bootstrap-collapse": ["jquery"],
        "bootstrap-transition": ["jquery"],
        "highcharts" : ["jquery"],
        "highcharts-chartdata" : ["highcharts"]
    }
});

// Load the main app module to start the app
requirejs(["main"]);

Please observe that the line above requirejs(["main"]); is actually "loading" the code in my main.js-file (below) which in its turn is loading other files:

require(["global","highcharts-chartdata"], function () {});

Without those, grunt-contrib-requirejs wont know what to include.

In our case we want to output a single js-file (optimized.js) to be included in your start page (index.html). For this to work I want point out that we need to add the require.js-script as well, without it the console would just say require is not defined. To do that you just add the following rows in your gruntfile:

paths: {
  requireLib: "vendor/require/require"
},
include: "requireLib",

You can read about it here: http://requirejs.org/docs/optimization.html#onejs

grunt-contrib-requirejs - need a little advice

3 Answers