說明

• 這篇blog以實際問題驅動來寫；
• Q: 表示問題表述；

Q: 在實際項目中，font-awesome.css在編譯到dest目錄生成krp_index.css，并加載到頁面，css引用的圖片路徑出錯，無法加載；

頁面分頁的上下翻頁的圖標消失了，下圖紅框標注處：

分頁上下圖標消失了

Q:為什么會產生這個問題

下面尋找導致這個問題的原因

圖標由css@font-face定義

以上圖標的定義在krp_index.css中定義如下

@font-face {  font-family: 'FontAwesome';  
src: url("../../font/fontawesome-webfont.eot?v=3.1.0");  
src: 
url("../../font/fontawesome-webfont.eot?#iefix&v=3.1.0") format('embedded-opentype'), 
url("../../font/fontawesome-webfont.woff?v=3.1.0") format('woff'), 
url("../../font/fontawesome-webfont.ttf?v=3.1.0") format('truetype'), 
url("../../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0") format('svg'); 
font-weight: normal;  font-style: normal;
}

源文件font-awesome.css中的定義

與源文件font-awesome.css的@font-face的定義比較，發(fā)現他們的url設置是一樣的

@font-face {  font-family: 'FontAwesome';  
src: url("../../font/fontawesome-webfont.eot?v=3.1.0");  
src: 
url("../../font/fontawesome-webfont.eot?#iefix&v=3.1.0") format('embedded-opentype'), 
url("../../font/fontawesome-webfont.woff?v=3.1.0") format('woff'), 
url("../../font/fontawesome-webfont.ttf?v=3.1.0") format('truetype'), 
url("../../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0") format('svg'); 
font-weight: normal;  font-style: normal;
}

查看目錄font與krp_index.css文件的目錄層級關系

• 通過查看dest目錄下font和krp_index.css文件的層級關系，發(fā)現他們只是上下單層層級；
• 而源文件與font目錄是兩層層級，中間多了一個lib目錄層；
• so,從源文件編譯到目標文件，目錄層級發(fā)生了改變，但css引用的font文件路徑卻沒改變，因此導致這個問題；

源文件font-awesome.css與font的層級關系:

源文件font-awesome.css與font的兩層層級關系

目標文件krp_index.css與font的層級關系：

目標文件krp_index.css與font的單層層級關系

Q:怎么辦？

在google上搜到一個gulp-modify-css-urls插件，可以幫助我們解決這個issue;

我是這樣使用的:

var modifyCssUrls=require('gulp-modify-css-urls');
....
.pipe(concat('krp_index.css'))
.pipe(modifyCssUrls(
     {  
        modify: function (url, filePath) {           
            if (url.indexOf('fontawesome-webfont') != -1) {
                return url.substring(3)           
            }        
      }    
   })
)

• gulp-modify-css-urls 會去遍歷css里的所有url；
  modifyCssUrls方法會去遍歷krp_index.css文件流中的所有url;

• 對每個url的處理函數你可以自定義；
  比如我定義的當url包含'fontawesome-webfont'字符串的時候，截取并返回從第3個字符開始到字符串末尾的字符串

然后生成的krp_index.css中@font-face的定義是這樣的

在如下的@font-face路徑設置下，the issue is fixed;

@font-face {  font-family: 'FontAwesome';  
src: url("../font/fontawesome-webfont.eot?v=3.1.0");  
src: 
url("../font/fontawesome-webfont.eot?#iefix&v=3.1.0") format('embedded-opentype'), 
url("../font/fontawesome-webfont.woff?v=3.1.0") format('woff'), 
url("../font/fontawesome-webfont.ttf?v=3.1.0") format('truetype'), 
url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0") format('svg'); 
font-weight: normal;  font-style: normal;
}

gulp-modify-css-urls插件文檔參考

https://www.npmjs.com/package/gulp-modify-css-urls