Include banner between files in Grunt

Question

I would like to concat into a single file

plugins.js (out of jQuery function)
fileA.js (jQuery function should start before this file)
fileB.js
...
fileZ.js (jQuery function should end after this file)

At the same time I would like to use jsbeautifier in all those files.

How could I add two "banners" before fileA.js

jQuery(function($){

and after fileZ.js

});

?

Partial solutions I can think of:

a) Add jQuery(function($){ in fileA.js and fileZ.js the corresponding. This forces me to exclude those two files from jsbeautifier which would throw an error. Also I would have to change the function opening/closing if I change the order of fileA.js,etc

b) Include two files that contain the opening/closing where it corresponds

c) Add "banners" in some similar way as this (I have no clue how to actually do something like this)

concat: {
    my_script: {
        files: {
            'myscript.js': [
                'plugins.js',
                // 'jQuery(function($){',
                'fileA.js',
                'fileB.js',
                // ...
                'fileZ.js',
                // '});'
            ],
        },
    },
},

Edit: I know for this specific case I can use

footer: '})',

however it is only a solution to half of the problem

Is there a better/simplier way of doing this?

a) and b) work but I am asking for a simplier way such as c) that I don't know how to achieve.

You yourself has given the possible solutions, then, which is the question? — JotaBe, Feb 15 '16 at 20:26
I don't know much about Grunt. The question is if there is a good/better way of doing this that might be obvious but that I am missing due to my lack of knowledge with Grunt. Thanks — Alvaro, Feb 15 '16 at 20:29
Please, update your aswer to state that question more clearly. — JotaBe, Feb 15 '16 at 20:31

score 0 · Answer 1 · answered Feb 15 '16 at 20:38

There are several posibilities, for example:

You can use a copy task with a process function that adds the code before and after the original content file: grunt-contrib-copy process
You can also use a combinaion of banner (beginning of the output file), separatos (in between each concatenated file) and footer (bottom of the output file), with grunt-contrib-concat
You can use grunt-contrib-concat with the process option, similtar to 1.

You must take into account in which order are run the tasks. This should be run before the beautifier.

score 0 · Answer 2 · answered Feb 22 '16 at 10:33

Thanks to JotaBe 's answer I could investigate on grunt-contrib-copy process This is the code I finally used.

concat: {
    my_script: {
        options: {
            process: function(src, filepath) {
                return src.replace(/\/\/ jQuery\(function\(\$\){/, "jQuery(function($){\n");
            },
            footer: '\n});',
        },
        files: {
            'myscript.js': [
                'plugins.js',
                'fileA.js',
                'fileB.js',
                // ...
                'fileZ.js',
            ],
        },
    },
},

fileA.js which is generally the file where I create variables, has to start with the commented-out jQuery enclosure. Basically the "process" from Grunt Concat comments it out. Also I need to include a footer for the closing enclosure (although it could be created in a similar way as the opening).

// jQuery(function($){

Include banner between files in Grunt

2 Answers2