Grunt copy plugin not able to configure

Question

I'm new to grunt and for my project I'm using grunt-contrib-copy plugin.My folder structure is:

module.exports = function(grunt){

const sass = require('node-sass');
require('load-grunt-tasks')(grunt);

grunt.initConfig({
    sass: {
        options: {
        implementation: sass,
    }, 
      dist: {
        files: [{
          expand: true,
          cwd: 'sass',
          src: ['*.scss'],
          dest: 'assets/css',
          ext: '.css'
        }]
      }
    },

    cssmin: {
        target: {
          files: [{
            expand: true,
            cwd: 'assets/css',
            src: ['*.css', '!*.min.css'],
            dest: 'build/assets/css',
            ext: '.min.css'
          }]
        }
      },

      copy:{
          html:{
              files:[{
                  expand:true,
                  dot:true,
                  cwd:'components',
                  src:['**/*.html'],
                  dest:'build/'
              }]
          }
      }
  });



  grunt.registerTask('default', ['sass','cssmin','copy']);
}

I want to copy the index.html and the components folder to the build folder but I'm not able to configure it. I'm able to copy either the index.html file or only component folder but unable to copy the both. Can someone please help me on this. It would be of immense help. Thank You well in advance.

Answer 1

There are several ways to achieve this.

Configure your copy task to one of the following. You probably only need to follow Solution A.

Note: Solution A and B, both achieve the same result. Solution C achieves a slightly different result:

---

Solution A

Using one target named html you can do this:

copy:{
  html:{
    files:[{
      src:['components/**', 'index.html'],
      dest:'build/'
    }]
  }
}

Note: In the src array above the first item which reads 'components/**' utilizes a Globbing pattern (i.e. the ** part). This means includes all items from the componentsfolder and include all subfolders many levels deep when copying.

---

Solution B

Or, using two targets; one named html and another named components you can do this:

copy:{
  html:{
    files:[{
      src:'index.html',
      dest:'build/'
    }]
  },
  components:{
    files:[{
      src:'components/**',
      dest:'build/'
    }]
  }
}

This is very similar to Solution A, however it uses two targets instead of one, which may be more appropriate as the target names actually indicate what they are copying.

---

Solution C

However if you don't actually want the components folder to be copied to build, and instead you only want the contents of the components folder to be copied you can do this:

copy:{
  html:{
    files:[{
      src:'index.html',
      dest:'build/'
    }]
  },
  components:{
    files:[{
      expand:true,
      cwd: 'components',
      src:'**',
      dest:'build/'
    }]
  }
}

---

Note: For additional information refer to the files section of the grunt documentation: