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

Question

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

did you try to add the files to ignore, or array with a ! prefix? Is it a bower package you need for production? if not, you may install it as --save-dev and wiredep wont pick it up, since is not production. — rmjoia, Jan 19 '16 at 19:33
Check the [wiredep options](https://github.com/taptapship/wiredep#configuration) I think that, you may add your filepath/array to the exclude options. Alternatively, You can override your bower.json file to ignore those files. — rmjoia, Jan 19 '16 at 19:44
It is for a production package. When developing locally, and not minifying the css, there are no issues. — Jeff Ancel, Jan 19 '16 at 20:12
add ignorePath: 'file:///C:/.../bower_components/angular-toasty/' on your wiredep options. if not, add .pipe(gulp.dest('destinationPath')) to the task to specify where to deploy — rmjoia, Jan 19 '16 at 20:16
This may be related to this, after noticing the project uses this project. https://github.com/kjbekkelund/gulp-css-rebase-urls/issues/6 — Jeff Ancel, Jan 19 '16 at 20:52

score 0 · Accepted Answer · answered Jan 20 '16 at 02:45

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.

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

1 Answers1