ES6 Grunt配置的动态目标

Question

I'm trying to configurate Grunt to start using ES6, so that it transpire each component's JS file to it's own folder.

I have the next directory structure:

 Components └──footer │ └──js │ └──footer.jsx └──header │ └──js │ └──header.jsx └──slider └──js └──slider.jsx 

and I need to have the next result:

 Components └──footer │ └──js │ │ └──footer.jsx │ └──compiled │ └──footer.js └──header │ └──js │ │ └──header.jsx │ └──compiled │ └──header.js └──slider └──js │ └──slider.jsx └──compiled └──slider.js 

Currently I have the following configuration:

babel: {
        options: {
            sourceMap: true,
            presets: ['env']
        },
        dist: {
            files: [{
                expand: true,
                cwd: "src/Components",
                src: ["**/*.jsx"],
                dest: 'compiled',
                ext: '.js',
                extDot: 'first'
            }]
        }
    }

and it puts all compiled files into one common folder.

How it should be configured to have compiled JS for each own component directory?

Answer 1

When building the files object dynamically you can utilize grunts rename property to generate and return a new destination path. The rename function is where you can handle the logic for this this type of requirement.

Gruntfile.js

// ...
babel: {
  options: {
    sourceMap: true,
    presets: ['env']
  },
  dist: {
    files: [{
      expand: true,
      cwd: 'src/Components',
      src: ["**/*.jsx"],
      dest: 'src/Components', // <--- This should be the same value as `cwd`
      rename: function (dest, src) {
        var destParts = dest.split('/'),
          srcParts = src.split('/');

        srcParts.splice((srcParts.length - 2), 1, 'compiled');
        return destParts.concat(srcParts).join('/');
      },
      ext: '.js',
      extDot: 'first'
    }]
  }
}
// ...

Notes

1. The rename function accepts two arguments, namely src and dest .
2. Within that function both the dest and src path Strings are split into Arrays of items. Each item of each resultant Array is part of the path because split('/') uses / as the separator.

3. We then utilize splice() to replace the second from last item in the Array, (which is the js part of the src path), with the new directory name, ie compiled .

4. Finally we concat 'enate all items of the new srcParts Array with the parts of the dest Array. This Array is turned back to a String joining items with / to form the new destination path. This new path String is returned.

5. The value of the dest property must match that of the cwd property in the files Object.