Grunt Task Runner to concatenate files

Question

I am writing grunt to concatenate files dynamically, for that I have array of files in my grunt.config variable. How to use that in grunt concat.

I am writing grunt.config('jsResources', targetConfig); from dynamically text-replace function. Its returning as array. How to utilize it in grunt concat. I tried this way but thats not worth.

My jsResources is array. My grunt is like

concat: {
    js: {
        //Concatenate all of the files in the jsResources configuration property
        src: ['app/<%= jsResources %>'],
        dest: 'build/views/js/combined.js',
        options: {
            separator: ';\n'
        }
    }            
}

Its repalcing content but can't read content, and concatenate in my combine.js My 'jsResources' is like ['scripts/modules/allModules.js','scripts/config/constants.js','...'] Its creating empty file combine.js.

edin-m · Accepted Answer · 2015-12-08T21:03:37.653

So I gave it one more try and this is result:

You need to generate paths before you put them in templated variable. Templated variable here is an object but can be any valid js more info. And inside it you can set properties that have array as values.

module.exports = function(grunt) {

  var myFiles = {
    jsResources: ['file1.js', 'file2.js']
  };

  myFiles.jsResources = myFiles.jsResources.map(function(item) { return 'app/' + item; });

  // var jsres = myFiles.jsResources; // another way

  grunt.initConfig({
    // myFiles: myFiles, // this is also possible instead of grunt.config() below
    concat: {
      dist: {
        src: ['<%= myFiles.jsResources %>'], // src: ['<%= jsres %>'],
        dest: 'dest.js',
      },
      options: {
        separator: '\n'
      }
    }
  });

  grunt.config('myFiles', myFiles);
  // grunt.config('jsres', jsres); // another way

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.registerTask('default', ['concat:dist']);

};

This generates dest.js with content.

I think adding `jsResources` as a property of the `myFiles` object is an unnecessary complication. The templates are evaluated against the entire config object, so having a config property `jsResources` will allow you to write `<%= jsResources %>`. — Igor Raush, Dec 08 '15 at 21:01
Correct, can be any valid ```js```. I've updated answer with comments. Thanks. — edin-m, Dec 08 '15 at 21:03

Igor Raush · Answer 2 · 2015-12-08T20:58:56.040

Edin's answer is a good way to go about this. Another solution is to (ab)use the expand/cwd options as follows:

grunt.initConfig({
  jsDir: 'app',
  jsResources: [ 'one.js', 'two.js' ],

  concat: {
    app: {
      expand: true,
      cwd: '<%= jsDir %>',
      src: ['<%= jsResources %>'],
      dest: 'dest.js',
      rename: function (dest) { return dest; }
    }
  }
});

Note that expand: true is normally used to have dynamic src/dest mappings, usually with many src/dest pairs (rather than an array of sources mapped to a single destination as is required by grunt-contrib-concat). However, in this case it can be used in conjunction with the rename option (briefly documented here) to achieve what you want.

This is a hacky approach, but it has the advantage of being declarative (in the style of Grunt) and it allows configuring the working directory (as I have shown above with jsDir).

Grunt Task Runner to concatenate files

2 Answers2