使用cssmin插件和bower时，将CSS Files中引用的图像复制到des文件夹

Question

我想为我的项目新使用Grunt（作为Task Runner）和Bower（作为包管理器），但是在使用cssmin Grunt插件来缩小css文件时我遇到了问题。

假设我在bower_component文件夹中有三个文件夹，如下所示：

└── components
|    ├── bootstrap
|    │   ├── img
|    │   │   └── glyhs.gif
|    │   └── css
|    │       └── bootstrap.css
|    └── bxslider-4
|    |   ├── css
|    |   │   └── jquery.bxslider.min.css
|    |   └── images
|    |        ├── next.gif
|    |        └── prev.gif
|    |
|    |__another_plugin
|       |__css
|       |   |__all.css
|       |__all_images
|           |__picture.png
|__css
    |_img
    |_all_style.min.css

现在我想将所有这些css文件缩小为名为all_style.min.css的目录中的css文件。

为此我写了Gruntfile.js文件：

module.exports = function (grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            target: {
                files: {
                    'css/all_style.min.css': [
                        'bower_components/bootstrap/css/bootstrap.css',
                        'bower_components/bxslider-4/jquery.bxslider.min.css'
                    ]
                }
            }
        }

    });

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

};

Css缩小工作正常，但问题是主css文件中的图像引用是相对于每个插件文件夹的，并且在缩小浏览器后无法找到它们。

我想要一种与缩小css文件一起使用的方法，除了将CSS文件中引用的复制图像复制到dest img文件夹之外，所有以前的图像URL都根据新位置更改为正确的图像URL。

我搜索了这个并且引用了how-to-rewrite-urls-of-images-in-vendor-css-files-using-grunt和类似的问题，但因为没有任何GruntFile配置，我无法理解他们做了什么。

更新：

这是我的package.js内容：

{
  "name": "gabrabad",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-cssmin": "^1.0.1",
    "grunt-contrib-uglify": "^1.0.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ahmadbadpey",
  "license": "ISC"
}