Configuration examples

Basic Use

This is the minimal recommended setup.

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

    'angular-builder': {
      options: {
        mainModule: 'mainModuleName'
      },
      app: {
        src:  'src/**/*.js',
        dest: '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 customisable 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:     {
        mainModule: '<%= conf.mainModuleName %>'
      },
      application: {
        files: [
          {
            src:  '<%= conf.srcPath %>/<%= conf.projectName %>/**/*.js',
            dest: '<%= conf.buildPath %>/<%= conf.projectName %>.js'
          },
          {
            src:  '<%= conf.srcPath %>/library1/**/*.js',
            dest: '<%= conf.buildPath %>/library1.js'
          }
        ]
      }
    }

  });
  
  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 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',
        dest: 'build/project.js'
      },
      library1: {
        src:  'src/library1/**/*.js',
        dest: 'build/library1.js'
      }
    }

  });
  
  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.

Building stylesheets, templates and assets

Here we have a more complete build example that also exports stylesheets and templates.

As you can see, Angular-Builder integrates well with other Grunt plugins. Some tasks are better delegated to plugins that are more suited for the job. That also allows you more control and flexibility in the way you customize tasks to your specific needs.

In this example, integration with other plugins is achieved via the requiredStylesheets and requiredTemplates configuration options. These are not defined anywhere in the Gruntfile; their values are exported by Angular-Builder when it is run.

Your module source code files must contain references to the required stylesheets and templates, as explained in Including stylesheets in the build and the Including templates in the build pages.

The concat plugin is responsible for concatenating all the required stylesheets into a single stylesheet file, in the order defined by Angular-Builder.

The ngtemplates plugin is reponsible for concatenating all the required templates, in the order defined by Angular-Builder, and embedding them in a single javascript file using Angular's $templateCache service.

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

    // Before generating any new files, remove any previously-created files.
    clean:  {
      app: ['dist']
    },

    'angular-builder': {
      options: {
        mainModule:      'mainModuleName',
        assets: {
          enabled:   true,
          targetDir: 'styles',
          symlink:   true
        }
      },
      app: {
        src:  'src/app/**/*.js',
        dest: 'build/project.js'
      }
    },

    'concat':
      app: {
        src:  '<%= requiredStylesheets %>',
        dest: 'dist/styles.css'
      }
    },

    ngtemplates: {
      options: {
        module:  'mainModuleName',
        htmlmin: {
          removeComments:               true,  // Only if you don't use comment directives!
          removeCommentsFromCDATA:      false, // Remove HTML comments from inside <script> and <style>.
          removeCDATASectionsFromCDATA: false, // Remove CDATA sections from inside <script> and <style>.
          collapseWhitespace:           true,
          collapseBooleanAttributes:    true,  // <input disabled="disabled"> => <input disabled>
          removeAttributeQuotes:        true,  // Remove attribute quotes when it's safe to do so.
          removeRedundantAttributes:    false, // Remove redundant attributes like type="text/javascript".
          removeEmptyAttributes:        false, // Remove empty (or blank) attributes.
          removeOptionalTags:           true,  // Some elements are allowed to have their tags omitted, like </td>.
          removeEmptyElements:          false  // Experimental
        }
      },
      app:     {
        options: { base: '' },
        src:     '<%= requiredTemplates %>',
        dest:    'dist/templates.js'
      }
    }

  });
  
  grunt.loadNpmTasks ('grunt-angular-builder');
  grunt.loadNpmTasks ('grunt-contrib-clean');
  grunt.loadNpmTasks ('grunt-contrib-concat');
  grunt.loadNpmTasks ('grunt-angular-templates');
  
  grunt.registerTask ('release', ['clean', 'angular-builder:app', 'concat:app', 'ngtemplates:app']);
  grunt.registerTask ('debug', ['clean', 'angular-builder:app:debug']);

};

The debug task has no stylesheets or templates concatenation, as in debug mode they will be read directly from their original locations.