Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Grunt Copy to copy images to new directory

Tags:

gruntjs

I'm using Grunt 0.4.1 and Grunt-contrib-copy version 0.4.1. I'm trying to copy images from a src directory to a distribution directory, but it's copying the full src directory instead of only the contents of the images directory. In other words, this is creating dist/images/src/images/..., whereas I want the result to just be dist/images/...

Here's my copy task:

copy: {
  images: {
    files: {
      'dist/images/': 'src/images/**/*'
    }
  }
}

And it's being run as follows:

// Default task.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default', ['less', 'concat', 'uglify', 'cssmin', 'copy']);

How do I get it so that only the subdirectories of src/images get copied into dist/images?

These files are already compressed and only need to be copied to the destination during build.

like image 218
Robert Biggs Avatar asked Oct 16 '13 20:10

Robert Biggs


2 Answers

What actually fixed my problem was designating the root directory structure from which I was copying with the "cwd" directive and then the src exactly like above. Just came back to post this and saw the same solution basically that I had come up with. Here is what worked for me:

copy: {
  images: {
    files: [
      { 
        expand: true,
        cwd: 'src/images/', 
        src: ['**/*.{png,jpg,svg}'], 
        dest:'dist/images/' 
      }
    ]
  }
}

The "cwd" property allows you to define the root of the source from which you are copying. This will not be included in the path of the copied files. So in my case, by defined "cwd" as "src/images", I'm then able to define the source as "**/*.{png,jpg,svg}" This finds all the subdirectories in the source images directory and only copies the files with the extensions I've provided. This gives me the result I want: dist/images/... with all the subdirectories as expected.

Without using "cwd", the grunt-contrib-copy literally copies the entire source tree structure into the destination. The "cwd" property allows you to cherry pick subdirectories and files from one file structure and copy them into another.

like image 157
Robert Biggs Avatar answered Nov 15 '22 22:11

Robert Biggs


You'll want to specify the flatten option, which removes the directory tree.

copy: {
    images: {
        expand:     true,
        cwd:        'src/images/',
        src:        ['**/*'],
        dest:       'dist/images/',
        filter:     'isFile',
        flatten:    true
    }
}
like image 23
Ben Avatar answered Nov 15 '22 23:11

Ben