1

My website project has a few JavaScript library dependencies, and I am using the gulp-concat plugin in my gulpfile.js to bundle them as one library instead of including them separately:

gulp.src(['src/js/angular.min.js',
          'src/js/angular-route.min.js',
          'src/js/angular-sanitize.min.js',
          'src/js/domador.min.js',
          'src/js/megamark.min.js',
          'src/js/woofmark.min.js'])
.pipe(concat('libs.js'))
.pipe(gulp.dest('dist/'));

A problem was introduced once I added the domador, megamark and woofmark libraries.

Although these libraries work perfectly fine if referenced in the HTML separately, bundling them introduces some illegal characters into my libs.js which breaks Chrome:

Uncaught SyntaxError: Unexpected token ILLEGAL

Dev Tools shows me that there are indeed three unexpected characters in-between where megamark.min.js finishes and woofmark.min.js starts:

enter image description here

But! When I look at libs.js in Visual Studio:

enter image description here

There seems to be some kind of 'hidden' characters in the mix which become 'unhidden' to Chrome and kill the script. I don't understand why they are there or why none of things I've tried to remedy it are working...

What I have tried:

  • Bundle everything except woofmark.min.js and include that separately. Yes, this works, but I want to bundle them all (and I want to understand what is happening)
  • Re-saved the files in Notepad as UTF-8 encoding. No effect.
  • Backspaced from half-way through the first keyword in woofmark.min.js, many more times than necessary, then re-typed the necessary characters. No effect.
  • Similar effort for the last few characters of megamark.min.js. No effect.

Any insight would be greatly appreciated!

vp_arth
  • 14,461
  • 4
  • 37
  • 66
Starscream1984
  • 3,072
  • 1
  • 19
  • 27
  • 1
    What server used for script delivery to browser? What default charset on it? I see, that `shchcy: "щ"` also incorrect. – vp_arth Nov 18 '15 at 16:10
  • 1
    Server should to response with `content-type:application/javascript; UTF-8` header for `.js` files. – vp_arth Nov 18 '15 at 16:14
  • 1
    This symbols - is just BOM marker. It should be correctly parsed if utf-8 used. – vp_arth Nov 18 '15 at 16:15
  • In this instance it would be Visual Studio 2015's IIS Express, not sure how to determine it's default charset. The crazy characters in the rest of the code are intentional, part of `woofmark`s functionality as far as I know, they don't seem to cause issue. – Starscream1984 Nov 18 '15 at 16:16
  • 1
    Anyway, one-byte charset was used on the first screen. – vp_arth Nov 18 '15 at 16:18
  • 1
    https://stackoverflow.com/questions/5406172/utf-8-without-bom – vp_arth Nov 18 '15 at 16:18
  • Thanks, your info has led me to the specific solution, I'll write it up as a detailed answer – Starscream1984 Nov 18 '15 at 16:23
  • just switch your studio to not generate signatures and delete this question, it's duplicate... – vp_arth Nov 18 '15 at 16:25
  • I couldn't find the answer on SO as I didn't know about BOM and was unable to find any resource that would explain why the issue only appeared when bundling - is it worth keeping as a specific issue? – Starscream1984 Nov 18 '15 at 16:36
  • I think, that you would not be able find this answer too :) Let it be.. – vp_arth Nov 18 '15 at 16:49

1 Answers1

0

Thanks to the information provided by vp_arth in the comments, I found the solution.

It seems that the woofmark.min.js file was encoded as "UTF-8 with signature", which is another way of saying that it has the invisible BOM marker which produced the illegal characters.

When sent separately by IIS it was being converted, but when concatenated in a bundle, the marker was being retained in the middle of the file, creating the illegal token.

To fix, I re-saved the file with a different encoding in Visual Studio:

  • File ->
  • Save src/js/woofmark.min.js As... ->
  • Save with Encoding... -> (button drop-down)
  • Select "Unicode (UTF-8 without signature) - Codepage 65001" from options.

Then, after re-running the gulp task, the full bundled lib.js works perfectly.

Starscream1984
  • 3,072
  • 1
  • 19
  • 27