Gulp Uglify Creating Weird Characters From Paper.js Library

Question

I am using Bower Paper.js package in a project. I use Gulp to prepare a project for the browser. However, there are some characters that look like this: bower_components / paper / dist / paper-full.min.js:

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

what finally happens through gulp:

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

The result of a console error is

Uncaught SyntaxError: Invalid regular expression: / [ªªÂμºà € -Ã-à ~ -öø-ËË † -Ë'Ë -Ë¤Ë¬Ë¤Ë®Í ° -Í'Í¶Í · ͺ-ͽΠ† Î- ΊΌΎ-Ρ [More weird characters] The range is out of order in the character class

Here is the corresponding snippet 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 highlighted the problem for this part of the process:

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

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

The uglify() method uglify() be canonical , required like this: var uglify = require('gulp-uglify') . So what's the problem? Why uglify() call this?

Answer 1

The problem here is that you are cleaning up already modified libraries.

The best approach would be to not touch third-party libraries and only concatenate them as they are. This will mean that you should include mini-sources of your libraries when possible. You now have unlimited versions of react.js and Promise.js .

Both are responsive and es6-shim deliver a mini version that already exists when doing bower install . To fix this, your task should look like this:

 ... 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 provide you with lib.js with only minimal third party libraries with minimal change to gulpfile.js .

Answer 2

Although, using Unicode characters, the ascii_only param parameter should be set to true .

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

ascii_only (false by default) - escape of Unicode characters in strings and regular expressions (affects directives with non-ascii characters that become invalid). Uglify Options