gulp - css url修改

说明

• 这篇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的定义比较，发现他们的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文件的层级关系，发现他们只是上下单层层级；
• 而源文件与font目录是两层层级，中间多了一个lib目录层；
• so,从源文件编译到目标文件，目录层级发生了改变，但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