front end development workflow with angularjs and gruntjs

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 expose restful services which the angularjs can consume.

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.

So how would you recommend having the front end development workflow ?, in order to avoid handling so many different js files a colleague has suggested the use of minification of js files using grunt.js , however once minified it becomes difficult to debug the same from my IDE...

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 ?

If that is possible,please also suggest how does one handle the script imports within the index.html

Basically we are new to this approach of development, till recently we used JSF for our views however we now want to check out the JS based libraries and see if they can improve productivity.

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:

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Playground 3</title>
<!-- build:style bundle -->
<!-- /build -->
</head>
<body>
<div ng-include src="'/views/global.navbar.html'"></div>
<div ng-view class="container"></div>
<div ng-include src="'/views/global.footer.html'"></div>
<!-- build:script bundle -->
<!-- /build -->
</body>
</html>

"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']);

来源：https://stackoverflow.com/questions/17073111/front-end-development-workflow-with-angularjs-and-gruntjs

标签

angularjs

workflow

frontend

gruntjs