front end development workflow with angularjs and gruntjs

Question

I wanted to know how the front end development workflow is organized when we use HTML 5 and angularjs.

We use a Jetty java back end (Cannot be changed), and we want to e

Answer 1

Great questions. My team ran into these problems as well. What you are going to want to get familiar with is Grunt.js object notation. You can do things like:

thetask: {
  dev: {
    src: [
      ['build/_compile','build/development/**']
    ]
  },
  prod: {
    src: [
      ['build/_compile','build/production/**']
    ]
  },
},

grunt.registerTask('package:dev',['thetask:dev']);
grunt.registerTask('package:prod',['thetast:prod']); 

~# grunt package:dev

"With angularjs it so happens that the main page needs to include many js files, most of which are application specific, we intend to split the application logically in js files."

Take a look at grunt-html-build. You can dynamically include files based on rules in your grunt file like this:

htmlbuild: {
    dev: {
        src: 'app/index.html',
        dest: 'build/development',
        options: {
            styles: {
                bundle: [ 
                    'build/development/css/app.css',
                ]
            },
            scripts: {
                bundle: [
                    // Bundle order can be acheived with globbing patterns.
                    // See: https://github.com/gruntjs/grunt/wiki/Configuring-tasks#globbing-patterns
                    'build/development/js/angular.js',
                    'build/development/js/angular-resource.js',
                    'build/development/js/nginfinitescroll.js',
                    'build/development/js/*.js',            
                ]
            },
        }
    },
    prod: {
        src: 'app/index.html',
        dest: 'build/production',
        options: {
            styles: {
                bundle: [ 
                    'build/production/css/app.css',
                ]
            },
            scripts: {
                bundle: [
                    'build/production/js/app.js',            
                ]
            },
        }
    },
},

And then in your index:

"Also should we be using minification during development, can this be pushed to a stage just before deployment or the like , so during development we use the unminified js files however minify them for the production release ?"

Would just be another task to choose to include in your build:

grunt.registerTask('package:dev',['thetask:dev']);
grunt.registerTask('package:prod',['thetast:prod','concat:prod','minify:prod']);