CODEWITHSUNDEEP
javascriptnode.jsgrunt-contrib-concat
Sankalp
Sankalp

Reputation: 1350

Grunt Task Runner to concatenate files

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.

Upvotes: 0

Views: 294

Answers (2)

edin-m
edin-m

Reputation: 3121

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.

Upvotes: 2

Igor Raush
Igor Raush

Reputation: 15240

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).

Upvotes: 1

Related Questions