Concatenating and minifying RequireJS with Grunt

Question

I have a project written in CoffeeScript that uses AngularJS. My vendor dependancies are installed using Bower and my file structure is like this:

- assets
 - js
  - app
   - model
    - *.coffee
   - factory
    - *.coffee
   ...
   - app.coffee
   - config.coffee
   - routes.cofeee
  - vendor
   - angular
   - lodash
   ...
  - dist

What I'm trying to do is the following:

1. I'm trying to work out how I can use RequireJS's r.js to optimise my app files so that I essentially get a concatenated file all ordered nice (so vendor dependancies, my config and routes, and they my app files).
2. Integrate this into my Grunt file.

I've tried using the r.js optimiser but maybe I've being too silly as all it seems to do is copy my app files (minus the vendor dependancies) into the dist folder; it does, however, manage to optimise the coffee generated js files.

Has anyone got any experience with this?

Answer 1

I figured it out: r.js works by reading your mainConfigFile and any modules you name within your configuration, the important note here is that r.js only looks at the first require/define within your named modules and goes off to seek them; so, for example, I had one named module called app:

require ['config'], (cfg) ->
  require ['angular'], (A) ->
    A.module cfg.ngApp, []

    require ['routes'], () ->
      require [
        'factory/a-factory',

        'service/a-service',

        'controller/a-controller'
      ], () ->
        A.bootstrap document, [cfg.ngApp]

The problem here was that r.js never got past the first require statement and thus the concatenation wasn't working. When I changed this to, say (my app.coffee):

require ['config'], (cfg) ->
  require ['angular'], (A) ->
    A.module cfg.ngApp, []

    require ['bootstrap'], (bootstrap) ->
      bootstrap()

And my bootstrap.coffee:

define [
  'config',
  'angular',
  'routes',

  'factory/a-factory',

  'service/a-service',

  'controller/a-controller'
], (cfg, A, routes) ->
  class Bootstrap
    constructor: () ->
      routes()

      A.bootstrap document, [cfg.ngApp]

This meant that I only needed to define angular and bootstrap in my r.js configuration as includes and then r.js would do the rest, like so:

baseUrl: 'assets/js/app',
mainConfigFile: 'assets/js/app/config.js',
name: 'app',
include: [
  '../vendor/requirejs/require',
  'bootstrap'
],
out: 'assets/js/dist/app.js'

And now it all works fine! ~~It's a shame that I have to tell r.js to include requirejs though, maybe I've done something silly there?~~

Blimey, I'm such a dingus!

So in my HTML I was loading my concatenated script as:

<script src="assets/js/dist/app.js"></script>

When really it should be loaded like this:

<script src="assets/js/vendor/requirejs/require.js" data-main="assets/js/dist/app"></script>

D'oh!

Answer 2

From r.js doc

https://github.com/jrburke/r.js/blob/master/build/example.build.js#L322

Nested dependencies can be bundled in requireJS > v1.0.3

//Finds require() dependencies inside a require() or define call. By default
//this value is false, because those resources should be considered dynamic/runtime
//calls. However, for some optimization scenarios, it is desirable to
//include them in the build.
//Introduced in 1.0.3. Previous versions incorrectly found the nested calls
//by default.
findNestedDependencies: false,