Having Grunt name files and include banners with source file names via Gruntfile.js

Question

I'm trying to set up a customized Gruntfile.js to use as a boilerplate on future projects (mostly web performance optimization tasks).

The task most relevant to this question is concatenation. Here's the configuration of that task from a recent project:

concat: {
            css: {
                options: {
                    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
                },
                src: [
                     'wp-content/plugins/orangebox/css/orangebox.css', 
                     'wp-content/themes/caps/style.css', 
                     'styles.css', 
                     'contact.css', 
                     'pro_dropdown_2/pro_dropdown_2.css', 
                     'css/slider.css'
                ],

                dest: 'combined.<%= grunt.template.today("ddmmyyyy") %>.css'
            },

            js: {
                options: {
                    banner: '/*! <%= pkg.name %>-Version-<%= pkg.version %>-Compiled-<%= grunt.template.today("dd-mm-yyyy") %> */\n',
                },

                src: [
                    'cformnkp.js',
                    'AC_RunActiveContent.js',
                    'js/moo_12.js',
                    'js/sl_slider.js',
                    'js/swfobject.js',
                    'scripts/*.js',
                    'pro_dropdown_2/*js'
                ],

                dest: 'concat.<%= grunt.template.today("ddmmyyyy") %>.js',
                separator: ";"
            }
        },

So that any other developers after me know what I did, I'd like to include a comment before each section of concatenated code (i.e. a 'banner') that would say what the original file name was before I concatenated them all.

It'd also be pretty cool if the new file was named obviously. For instance, if the concatenated JS file was cformnkp-AC_RunActiveContent-moo_12-sl_slider-swfobject.js (this is neglecting the dynamically added files, as well as the last specifically enumerated file but you get the idea).

I thought <%= pkg.name %> might accomplish this but it only inserts the name of my package as listed in package.json.

I can't fully make sense of the LoDash template documentation, and nothing on here seems to indicate how to do this even though is seems pretty straight-forward. A little help?

Answer 1

As for seperator between each part of the code that includes original file path, you can use the process option of grunt-contrib-concat as mentioned in this question: grunt-concat separator option?

---

For a file name like lib1-lib2-lib3.js, what you could check out is the grunt.file api page.

The grunt.file.expand() function takes a list of file patterns and return the complete list of file names that match (with path).

From there, some old fashioned Javascript code in Gruntfile.js will get the result you want.

Before grunt.initConfig :

var src = [
    'cformnkp.js',
    'AC_RunActiveContent.js',
    'js/moo_12.js',
    'js/sl_slider.js',
    'js/swfobject.js',
    'scripts/*.js',
    'pro_dropdown_2/*js'
];

// returns full list of .js files that matches your *.js
var complete_src = grunt.file.expand(src); 


var final_name = '';

// some string manipulations to get your the format you want 

for (var i = 0; i < complete_src.length; i++) {
    complete_src[i] = complete_src[i].substring(complete_src[i].lastIndexOf('/') + 1, complete_src[i].length - 3);

}

var final_name = complete_src.join('-');

then:

    dist: {
        src: src ,
        dest: 'dist/'+final_name+'.js'
    }