Grunt，替换css中的图像路径

Question

当您编译项目Grunt需要传递编译后的css文件时，将所有方式都替换为所需的图像。

我们需要这个以使外包具有其自己的文件夹和图像，例如dist/images/vendor。

要在其中搜索的文件是从通过凉亭设置的外部样式编译的。因此，每个插件的样式都是通过图像的方式进行的，因此决定加载文件夹中的所有图像并重新编写它们以适应图像。

我们：

1. 编译的样式是dist/css/bundle-vendor.css。
2. fancybox风格是vendor/fancybox/source/jquery.fancybox.css。
3. fancybox复制图像是dist/images/vendor。

由于这样的结果：

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 
    background-image: url('fancybox_sprite.png'); 
} 

获取表单：

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 
    background-image: url('../images/vendor/fancybox_sprite.png'); 
} 

我想知道是否存在从根保留路径的解决方案，到所需文件夹。在这种情况下，我们得到如下：

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 
    background-image: url('../images/vendor/fancybox/source/fancybox_sprite.png'); 
} 

Answer 1

NPM安装咕噜字符串替换--save

Grunt.js

grunt.loadNpmTasks('grunt-string-replace'); 

添加任务

string-replace 

grunt.initConfig add

'string-replace': { 
     inline: { 
      src: [ 
       'dist/css/<%= that.name %>-vendor.css' 
      ], 
      dest: "dist/css/<%= that.name %>-vendor-rep.css", 
      options: { 
       replacements: [{ 
        pattern: /:(\s*)(url\(\s*[\"\']*)(?:[^\"\']+\/)?([^\/\"\'\)]+[\"\']*\s*\))/ig, 
        replacement: ': $2../images/vendor/$3' 
       }] 
      } 
     } 
    } 

THX @Visman