Configuration examples

---

Basic Use

This is the minimal recommended setup.

module.exports = function (grunt)
{
  grunt.initConfig ({

    'angular-builder': {
      options: {
        main: 'mainModuleName'
      },
      application: {
        src:          'src/**/*.js',
        targetScript: 'build/project.js'
      }
    }

  });
  
  grunt.loadNpmTasks ('grunt-angular-builder');
  
  grunt.registerTask ('release', ['angular-builder']);
  grunt.registerTask ('debug', ['angular-builder::debug']);

};

The recommended tasks alias

Those two alias tasks registered at the bottom are customizable shortcuts to your build process. They can be expanded with additional subtasks provided by other Grunt plugins.

To assemble a release build of your project, run the command: grunt release

For a debug build, run the command: grunt debug

These alias are just a suggestion. You may configure your Grunt tasks in any way you want.

Integrating with other Grunt tasks

If you wish to minify/optimize your build files, you can add the respective tasks to the release task list, after the angular-builder task.

If you wish to compile files from other languages to javascript (coffeescript, typescript, etc), they must be compiled prior to the build step, so you should add the respective tasks to the release task list before the angular-builder task.

If you use CSS preprocessors, you may have to add the respective tasks to both the release and the debug task lists.

A more sophisticated config

module.exports = function (grunt)
{
  var conf = {
    projectName:    'ExampleProjectName',
    mainModuleName: 'ExampleMainModuleName',
    buildPath:      'build',
    srcPath:        'src'
  };

  // Project configuration.
  grunt.initConfig ({
    conf: conf,

    'angular-builder': {
      options:     {
        main: '<%= conf.mainModuleName %>'
      },
      application: {
        files: [
          {
            src:          '<%= conf.srcPath %>/<%= conf.projectName %>/**/*.js',
            targetScript: '<%= conf.buildPath %>/<%= conf.projectName %>.js',
            targetCSS:    '<%= conf.buildPath %>/<%= conf.projectName %>.css'
          },
          {
            src:          '<%= conf.srcPath %>/library1/**/*.js',
            targetScript: '<%= conf.buildPath %>/library1.js',
            targetCSS:    '<%= conf.buildPath %>/library1.css'
          }
        ]
      }
    }

  });
  
  grunt.loadNpmTasks ('grunt-angular-builder');
  
  grunt.registerTask ('release', ['angular-builder']);
  grunt.registerTask ('debug', ['angular-builder::debug']);

};

By using a conf object and template expressions <%= %>, you can reduce repetition and aggregate common settings on a same location, therefore making it easier to reconfigure large tasks with many settings.

The example above assumes:

• Your app's files reside on the folder src/ExampleProjectName (or on any subfolder of it).
• A standalone library library1 should be built from src/library1.
• The output is saved on build.

Note: these paths are all relative to the Gruntfile.js folder (i.e. your's projects root folder).

A multiple target example

This last example splits the build process into multiple targets.

This allows you to build each target independently, or to build them all in sequence.

module.exports = function (grunt)
{
  grunt.initConfig ({

    'angular-builder': {
      options: {
        main: 'mainModuleName'
      },
      application: {
        src:          'src/app/**/*.js',
        targetScript: 'build/project.js',
        targetCSS:    'build/project.css'
      },
      library1: {
        src:          'src/library1/**/*.js',
        targetScript: 'build/library1.js',
        targetCSS:    'build/library1.css'
      }
    }

  });
  
  grunt.loadNpmTasks ('grunt-angular-builder');
  
  grunt.registerTask ('release', ['angular-builder']);
  grunt.registerTask ('debug', ['angular-builder::debug']);

  grunt.registerTask ('release1', ['angular-builder:application', 'angular-build-library1']);
  grunt.registerTask ('debug1', ['angular-builder:application:debug', 'angular-build-library1:debug']);

  grunt.registerTask ('lib-release', ['angular-builder:library1']);
  grunt.registerTask ('lib-debug', ['angular-builder:library1:debug']);

};

In the example above, the tasks release and release1 do the same, as do debug and debug1, they are just written in a different way.

But, while release builds all targets, release1 builds just the specified ones.
As for the lib-release task, only library1 is built.

---

Next: Configuring tasks