Working project structure that uses grunt.js to combine JavaScript files using RequireJS?

Question

I have some projects that use RequireJS to load individual JavaScript modules in the browser, but I haven't optimized them yet. In both development and production, the app makes a separate request for each JavaScript file, and now I would like to fix that using Grunt.

I have tried to put together a simple project structure to no avail, so I'm wondering if someone can provide a working example for me. My goals are the following:

1. In development mode, everything works in the browser by issuing a separate request for each required module. No grunt tasks or concatenation are required in development mode.
2. When I'm ready, I can run a grunt task to optimize (combine) all of the JavaScript files using r.js and test that out locally. Once I'm convinced the optimized application runs correctly, I can deploy it.

Here's a sample structure for the sake of this conversation:

grunt-requirejs-example/
  grunt.js
  main.js (application entry point)
  index.html (references main.js)
  lib/ (stuff that main.js depends on)
    a.js
    b.js
    requirejs/
      require.js
      text.js
  build/ (optimized app goes here)
  node_modules/ (necessary grunt tasks live here)

Specifically, I'm looking for a working project structure that I can start from. My main questions are:

1. If this project structure is flawed, what do you recommend?
2. What exactly needs to be in my grunt.js file, especially to get the r.js optimizer working?
3. If all of this isn't worth the work and there's a way to use the grunt watch task to automatically build everything in development mode every time I save a file, then I'm all ears. I want to avoid anything that slows down the loop from making a change to seeing it in the browser.

Answer 1

I use the grunt-contrib-requirejs task to build project based on require.js. Install it inside your project directory with:

npm install grunt-contrib-requirejs --save-dev

BTW: --save-dev will add the package to your development dependencies in your package.json. If you're not using a package.json in your project, ignore it.

Load the task in your grunt file with:

grunt.loadNpmTasks('grunt-contrib-requirejs');

And add the configuration to your grunt.initConfig

requirejs: {
  production: {
    options: {
      baseUrl: "path/to/base",
      mainConfigFile: "path/to/config.js",
      out: "path/to/optimized.js"
    }
  }
}

Now you're able to build your require.js stuff into a single file that will be minimized with uglifyjs by running grunt requirejs

You can bundle a set of different tasks into some sort of main task, by adding this to your grunt file

grunt.registerTask('default', ['lint', 'requirejs']); 

With this, you can simply type grunt and grunt will automatically run the default task with the two 'subtasks': lint and requirejs.

If you need a special production task: define it like the above

grunt.registerTask('production', ['lint', 'requirejs', 'less', 'copy']);

and run it with

grunt production

If you need different behaviors for 'production' and 'development' inside i.e. the requirejs task, you can use so called targets. In the configuration example above it's already defined as production. You can add another target if you need (BTW, you can define a global config for all targets by adding a options object on the same level)

requirejs: {
  // global config
  options: {
    baseUrl: "path/to/base",
    mainConfigFile: "path/to/config.js"
  },
  production: {
    // overwrites the default config above
    options: {
      out: "path/to/production.js"
    }
  },
  development: {
    // overwrites the default config above
    options: {
      out: "path/to/development.js",
      optimize: none // no minification
    }
  }
}

Now you can run them both at the same time with grunt requirejs or individually with grunt requirejs:production, or you define them in the different tasks with:

grunt.registerTask('production', ['lint', 'requirejs:production']);
grunt.registerTask('development', ['lint', 'requirejs:development']);

Now to answer your questions:

1. I would definitely use a subfolder in your project. In my case I use a 'src' folder for development that is build into a 'htdocs' folder for production. The project layout I prefere is:

   project/
     src/
       js/
         libs/
           jquery.js
           ...
         appname/
           a.js
           b.js
           ...
         main.js // require.js starter
       index.html
       ...
     build/
       ... //some tmp folder for the build process
     htdocs/
       ... // production build
     node_modules/
       ...
     .gitignore
     grunt.js
     package.json
   

2. see above

3. You can do so, but I wouldn't recommend to add requirejs to the watch task, it's a resource hungry task and it will slow down your machine noticeable.

Last but not least: Be very cautious when playing around with r.js. Especially when you want to optimize the whole project with r.js by adding a modules directive to your config. R.js will delete the output directory without asking. If it happens that it is accidentally configured to be your system root, r.js will erase your HDD. Be warned, I erased my whole htdocs folder permanently some time ago while setting up my grunt task... Always add keepBuildDir:true to your options when playing around with the r.js config.