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.

score 3 · Answer 1 · answered May 22 '15 at 18:01

3

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',
    }
  }
});

answered May 22 '15 at 18:01

taxicala

21,408
7
37
66

Thanks for your answer. Please, take into account that are nearly ~300 files, so specify them one by one would be cumbersome will make my Gruntfile unmanageable. Can you provide other solution to this issue? Thanks – Diosney May 22 '15 at 18:04
Well, you can do exactly as stated in the answer, you would put the first file containing your module declarations (e.g. lib/before.js) as the first parameter, then the * takes care of your 299 other files (lib/*). Does that make enough sense? Maybe I did not understand your question. You have to specify something. you cant infer an order without telling it what order. Or alternatively, write it out in pseudo code/english, and we will try to make sense of what you think it should do. – redfox05 Feb 18 '16 at 14:00

score 0 · Answer 2 · answered May 22 '15 at 18:05

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'
            ]
        }
    }
}

That will be a way to do it, but I usually have only one controller & service per module, so I will be end with one folder with only one file :( — Diosney, May 22 '15 at 18:13

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

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

you may consider this solution

Separate the module declaration to xxx.module.js
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

Grunt + Concat + Angularjs

3 Answers3