Grunt + Concat + Angularjs

Question

Setup:

• A Gruntfile with the following task:

  concat: { build: { files: { 'build/app.js': [ 'src/ .js', 'src/ / .js', '!src/vendors/ ' ], } }

• A lot of angular modules, with its controllers, services, and so on, with a structure like this:

  a/ a.js // Module declaration like: angular.module('a',[]) a-controller.ks // Which sets a controller in its root module definition like: angular.module('a').controller()...

Issue:

The task concatenates all the js files it finds in the build folder to a single app.js file, and it does this fine, but messes up with the order of files when concatenating .

For instance, it concatenates first the controller file instead of the main folder file containing the module declaration, triggering the following error:

Module xxxx not available!

I suppose the issue lies in the way concat builds up the files and that is done by the grunt core and specifically the minimatch library, and the possibility it treats dashes to be first than letters, but I don't know how configure to change that behavior, and even know if that is possible.

Question:

So, the question is: How can I make Grunt/Grunt-concat to process dashed f first than the others in the same folder so the ordering is maintained?

Thanks

Update 1:

After digging more, It seems that it has nothing to do with the ordering inside a folder, but Grunt/Core sending the root files to the end and putting them the leaf ones first.

Answer 1

Just specify the order you want to concat your files, placing them in order, what I mean is, first add your single files that should be concatenated at start, after your full folder that does not need to have an order, and finally your final files, something rougth like this:

grunt.initConfig({
  concat: {
    js: {
      src: ['lib/before.js', 'lib/*', 'lib/after.js'],
      dest: 'bundle.js',
    }
  }
});

Answer 2

You will have to specify to the grunt-concat task the order you want your files built. For my projects, I typically keep a folder structure where controllers go in a app/controllers folder, services in services , and etc, but names can vary. I also keep an app.js that declares my app module and specifies the config handler for it. I use a config like this for grunt-uglify but the same can be done for concat with little to no changes:

uglify: {
    development: {
        files: {
            'public/scripts/app.js': [
                'public/app/app.js',
                'public/app/controllers/*.js',
                'public/app/directives/*.js',
                'public/app/services/*.js'
            ]
        }
    }
}

Answer 3

I just copy paste my answer, the detail you want on second picture, i hope help you.

you may consider this solution

1. Separate the module declaration to xxx.module.js

2. In grunt-contrib-concat modify the config like below :

   place this outside grunt.initConfig

var clientApp = './app/';

---

grunt-contrib-concat config

dist: {// grab module first, state the second
    src: [
        clientApp+'**/*-controller.js',
        clientApp+'**/*.module.js',
        clientApp+'**/*.state.js',
        clientApp+'**/*.js'
        ],
    dest: 'dist/<%= pkg.name %>.js'
}

i use state to so i have to define state too before trying to navigate to any state. This is preview my code, the module declaration is declared fist before anything, then my state. even minified doesnt create any problem.

I hope this help you. i follow this johnpapa's style guide , your problem might solve there if my solution not work