Grunt Task Runner连接文件

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 .

Answer 1

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.

Answer 2

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