Gulp / Wiredep 构建时在 css 中嵌入了 base64 图像的完整路径

Question

使用 wiredep + ng-poly，我有一个来自 angular toasty 的主文件。

"main": [
    "dist/angular-toasty.js",
    "dist/angular-toasty.css"
],

在angular-toasty.css中，有Base64 PNG：

url("data:font/ttf;base64,AAEAAAASAQAABAAgR0RF....")

如何告诉 wiredep 忽略这些 url，以便它在我部署时不生成本地路径？

file:///C:/.../bower_components/angular-toasty/dis…AAAAEACAABACwAAQAIAAEABACg

Answer 1

问题的根源在于ng-poly构建资源的方式。我有点过时了，所以我要 post 在这里为那些以后可能会偶然发现的人修复。

在 build.js 文件中，在 'bowerCopy' 下，有一种规范化技术无法正确处理 data: url。这是我用来解决这个问题的代码。

      .pipe($.if(isProd, $.modifyCssUrls({
    modify: function (url, filePath) {
      if (url.indexOf('http') !== 0 && url.indexOf('data:') !== 0) {
        filePath = path.dirname(filePath) + path.sep;
        filePath = filePath.substring(filePath.indexOf(bowerDir) + bowerDir.length,
          filePath.length);
      } else if (url.indexOf('data:') === 0) {
        // If it's 0, just return it....
        return url;
      }
      url = path.normalize(filePath + url);
      url = url.replace(/[/\]/g, '/');
      return url;
    }
  })))

我添加了 "else if" 语句。

Gulp / Wiredep 构建时在 css 中嵌入了 base64 图像的完整路径

Gulp / Wiredep builds with full path prepended to base64 images embedded in css

angularjs

bower

gulp

wiredep