Grunt concat files into their respective source directory

158 Views Asked by At

This is a follow-up to a previous question that was answered here. Please refer to that question for added context.

For this question, let's say that my _config.yml now looked like this instead:

computer:
  parts:
    - name: brand1
      type: cpu
        foo: foo
        bar: bar
        baz: baz
    - name: brand2
      type: gpu
        foo: foo
        bar: bar
        baz: baz
    - name: brand3
      type: hd
        foo: foo
        bar: bar
        baz: baz

*Please ignore type for now

Which is parsed to create a directory tree that looks like this:

htdocs/
└── computer/
    └── parts/
        ├── brand1/
        │   ├── foo/
        │   │   └── foo.js
        │   ├── bar/
        │   │   └── bar.js
        │   └── baz/
        │       └── baz.js
        ├── brand2/
        │   ├── foo/
        │   │   └── foo.js
        │   ├── bar/
        │   │   └── bar.js
        │   └── baz/
        │       └── baz.js
        └── brand3/
            ├── foo/
            │   └── foo.js
            ├── bar/
            │   └── bar.js
            └── baz/
                └── baz.js



When you take a look at RobC's two answers:

Gruntfile.js

module.exports = function (grunt) {

  grunt.loadNpmTasks('grunt-contrib-concat');

  var external = grunt.file.readYAML('_config.yml');

  grunt.initConfig({
    concat: {
      dist: {
        options: {
          // ...
        },
        src: external.computer.parts.map(function(part) {
          return 'htdocs/' + part.name + '/**/*.js'
        }),
        dest: 'htdocs/output.js'
      }
    }
    // ...
  });

  grunt.registerTask('default', [ 'concat' ]);

};

--- AND ---

Gruntfile.js (ES6 Version)

module.exports = function (grunt) {

  grunt.loadNpmTasks('grunt-contrib-concat');

  const { computer: { parts } } = grunt.file.readYAML('_config.yml');

  grunt.initConfig({
    concat: {
      dist: {
        options: {
          // ...
        },
        src: parts.map(({ name }) => `htdocs/${name}/**/*.js`),
        dest: 'htdocs/output.js'
      }
    }
    // ...
  });

  grunt.registerTask('default', [ 'concat' ]);

};

both achieve the task of concatenating all files from every directory + subdirectory into one htdocs/output.js, but what I would like to know in this problem is: How can I setup my Gruntfile so that once grunt concat is run, Grunt would concatenate files in one array index into the root of its source, while looping through every index in that array?


The directory tree would ideally look something like this after running grunt concat:

htdocs/
└── computer/
    └── parts/
        ├── brand1/
        │   ├── foo/
        │   │   └── foo.js
        │   ├── bar/
        │   │   └── bar.js
        │   ├── baz/
        │   │   └── baz.js
        │   └── output.js
        ├── brand2/
        │   ├── foo/
        │   │   └── foo.js
        │   ├── bar/
        │   │   └── bar.js
        │   ├── baz/
        │   │   └── baz.js
        │   └── output.js
        └── brand3/
            ├── foo/
            │   └── foo.js
            ├── bar/
            │   └── bar.js
            ├── baz/
            │   └── baz.js
            └── output.js

foo.js,bar.js, and baz.js would be concatenated into an output.js file and its destination would be: htdocs/computer/parts/brand1/output.js, etc...

0

There are 0 best solutions below