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