grunt-contrib-copy is corrupting binary files.

And Making Webfonts in Firefox not to load properly

So I’m using grunt-contrib-copy to move files around in our daily web development, then… I just notice something awkward…

Some of the binary files (images, fonts) were having different sizes in the output. That was weird, but everything seems to be working fine, so I didn’t care. Until I tested some of the pages in Firefox, and a very annoying issue appeared: Webfonts were missing. Not rendered at all.

So, long story short, I remembered that grunt-contrib-copy was corrupting the binary files, but it was only noticeable on the webfonts. The file size difference was the first clue, and the message in the Firefox Developer’s tool, just confirmed it.

downloadable font: incorrect file size in WOFF header…

So I just dig a bit in the internet and found that the grunt.file.copy (which is used underneath by grunt-contrib-copy) was the culprit. In order to avoid this, the easiest way to do it is just to add this to your ‘copy’ section on your config object for grunt:

{
  copy: {
    options: {
      // exclude binary format from the processContent function
      processContentExclude: [
        '**/*.{png,gif,jpg,ico,psd,ttf,otf,woff,svg}'
      ]
    },
    libs: {
      files: [{
        src: ['**/*.*'],
        dest: DEPLOY_DIR + '/ext/jquery/',
        cwd: THIRD_PARTY_DIR + '/jquery/',
        expand: true
      }]
    }
  }
}

Enjoy!

Advertisements

2 thoughts on “grunt-contrib-copy is corrupting binary files.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s