Gulp Uglify Producing Strange Characters from Paper.js Library

Question

I'm using the Bower package of Paper.js in a project. I'm using Gulp for preparing the project for the browser. There are some characters, however, that look like this in bower_components/paper/dist/paper-full.min.js:

\xaa\xb5\xba\xc0-\xd6\xd8-\xf6\xf8-\u02c1\u02c6-\u02d1\u02e0-\u02e4\u02ec...

that end up like this after going through Gulp:

ªµºÀ-ÖØ-öø-ˁˆ-ˑˠ-ˤˬˮͰ-ʹͶͷͺ-ͽΆΈ-ΊΌΎ-ΡΣ-ϵϷ-ҁҊ-ԧԱ-Ֆՙա-ևא-תװ-ײؠ-يٮ...

Resulting in a console error of

Uncaught SyntaxError: Invalid regular expression: /[ªµºÀ-ÖØ-öø-ˈ-Ë‘Ë -ˤˬˮͰ-ʹͶͷͺ-ͽΆΈ-ΊΌΎ-Ρ[Lots more strange characters] Range out of order in character class

Here is a relevant chunk of my gulp file:

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var browserify = require('browserify');
var reactify = require('reactify');
var source = require('vinyl-source-stream');
var jade = require('gulp-jade');
var nib = require('nib');
var del = require('del');

var cfg = require('./cfg.json');

var action = {
  clean: function(cb){
    del([
      ['./', cfg.dir.root.dev].join('')
    ], cb);
  },
  concatLibs: function(){
    gulp.src([
      './bower_components/jquery/dist/jquery.min.js',
      './bower_components/react/react.js',
      './bower_components/when/es6-shim/Promise.js',
      './bower_components/lodash/lodash.min.js',
      './bower_components/postal.js/lib/postal.min.js',
      './bower_components/oboe/dist/oboe-browser.min.js',
      './bower_components/paper/dist/paper-full.min.js'])
      .pipe(uglify())
      .pipe(concat('lib.js'))
      .pipe(gulp.dest(['./', cfg.dir.root.dev, cfg.dir.type.js].join('')));
  },
...

I've isolated the problem to this part of the process:

.pipe(uglify()) // in the concatLibs action

That is, commenting out this line does not generate the unusual characters, and does not result in a console error.

The uglify() method seems to be the canonical one, required like so: var uglify = require('gulp-uglify'). So what's the problem? Why is uglify() causing this?

Herbertherbicide

I'll suggest you use the un-minified version of paper.js and see what happens, it looks definitely strange though. – Widower

@generalgmt Yes, I tried the un-minified version with the same results. Have you been able to duplicate the problem? – Herbertherbicide

I couldn't reproduce the error. I injected it into my script. maybe you should check the version. the paper version is used is "0.9.24" and the uglify version is "1.4.1". – Widower

That part of paper.js is already minified, so using the un-minified version is not really any different. The code is from acorn and implements non-ASCII identifier RegExp patterns. When I use either the acorn source code or the output of gulp-uglify and manually create the RegExp strings everything works correctly even though the characters do show up as you say they do. Net, it's the correct interpretation of the characters that are entered as \uXXXX. I used paper-0.9.25 and uglify versions 1.2.0 and 1.4.2. – Territorialism

Answer 1

The problem here seems to be that you are uglifying already minified libraries.

A better approach would be to not touch third party libraries and only concat them as is. This would mean that you should include minified sources of your libs whenever possible. You now have unminified versions of react.js and Promise.js.

Both react and es6-shim supply a minified version, which are already in place when doing a bower install. To fix this, your task should look like:

...
concatLibs: function(){
    gulp.src([
      './bower_components/jquery/dist/jquery.min.js',
      './bower_components/react/react.min.js',
      './bower_components/when/es6-shim/Promise.min.js',
      './bower_components/lodash/lodash.min.js',
      './bower_components/postal.js/lib/postal.min.js',
      './bower_components/oboe/dist/oboe-browser.min.js',
      './bower_components/paper/dist/paper-full.min.
      .pipe(concat('lib.js'))
      .pipe(gulp.dest(['./', cfg.dir.root.dev, cfg.dir.type.js].join('')));
  }
...

This will supply you with a lib.js with only minified third party libraries with a minimal change to your gulpfile.js.

Crock

Answer 2

While, using Unicode characters, ascii_only param need be set as true.

In this case .pipe(uglify({output: {ascii_only:true}})) should work.

ascii_only (default false) -- escape Unicode characters in strings and regexps (affects directives with non-ascii characters becoming invalid). Uglify options

Vinita