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

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

Using wiredep + ng-poly, I have a main file from angular toasty.

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

In the angular-toasty.css, there are Base64 PNGs:

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

How do I tell wiredep to ignore these urls so it doesn't produce a local path when I deploy?

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

Solution

The source of the issue is the way that ng-poly builds resources. I'm on a little bit dated so, I'm going to post my fix here for those that may stumble on this later.

In the build.js file, under 'bowerCopy', there is a normalization technique that doesn't deal with data: urls properly. This is the code I used to take care of this issue.

      .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;
    }
  })))

I added the "else if" statement.