Gruntfile issue: vendor image in CSS not copied

[fgolemo]

Hey, first of all props for this awesome generator. Used it in 2 projects so far and I'm amazed by it.

Now my issue:

• Through bower I installed the packages select2and angular-ui-select
• and I created a basic select2 input field for tags.
• Now the select2.css uses an image as background somewhere, from the same folder, called with ... background-image: url("select2.png");...".
• After running grunt build, this image is gone, i.e. not included in dist/public/images and the path in the css file is not adjusted.

I've read through Grunt config documentation for copy, usemin and cssmin, for almost an hour, but I still have no idea what's happening there. Grunt tasks are black magic to me. Could you help me with that? I suppose it's a gruntfile thing.

[DaftMonk]

If you put your images in the images folder, and reference them with an absolute url from your CSS, it should build correctly. e.g.

background-image: url("/images/yeoman.png");

[fgolemo]

But it's a third-party/vendro .css that I would change... namely the select2.css.
And if there is any upgrade to that package, it will be overwritten.

[DaftMonk]

Well in that case, you can add images in your styles folder to the grunt copy task.

      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        'bower_components/**/*',
        'images/{,*/}*.{webp}',
        'fonts/**/*',
        'styles/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'          //<--
      ]

[fgolemo]

Cool, that works - if I copy the image in question from the bower_components/select2 to the styles folder.
Another, also kinda hackish solution (add another imagemin section):

imagemin: {
            dist: {
                files: [
                    {
                        expand: true,
                        cwd: '<%= yeoman.app %>/images',
                        src: '{,*/}*.{png,jpg,jpeg,gif}',
                        dest: '<%= yeoman.dist %>/public/images'
                    }, {                                                 // <-- CHANGE START
                        expand : true,
                        flatten : true,
                        cwd : '<%= yeoman.app %>/bower_components',
                        src : '**/*.{png,jpg,jpeg,gif}',
                        dest : '<%= yeoman.dist %>/public/styles'
                    }                                                    // <-- CHANGE END
                ]
            }
        },

Pro: I don't have to manually copy images from bower_components/* to styles/ before the build
Con: I get a few unnecessary image files in my dist/styles folder

[clabnet]

fgolemo, DaftMonk,
you are right. It's magic.
Thank you.