Gulp Uglify che produce strani caratteri dalla libreria Paper.js

Question

Sto utilizzando il pacchetto Bower di Paper.js in un progetto. Sto usando Gulp per preparare il progetto per il browser. Ci sono alcuni personaggi, tuttavia, che questo aspetto nel bower_components/carta/dist/carta full.min.js:

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

che finiscono in questo modo dopo aver attraversato Gulp:

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

con un conseguente errore di console di

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

Ecco un pezzo rilevante del mio file gulp:

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(''))); 
    }, 
... 

ho isolato il problema a questa parte del processo:

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

Cioè, commentando questa linea non genera i personaggi insoliti, e non si tradurrà in un errore di console.

Il metodo uglify()seems to be the canonical one, richiesto in questo modo: var uglify = require('gulp-uglify'). Allora, qual'è il problema? Perché lo è uglify()?

Answer 1

Il problema qui sembra essere che si stanno già semplificando le librerie già miniate.

Un approccio migliore sarebbe quello di non toccare le librerie di terze parti e concatenarle solo così come sono. Ciò significherebbe che dovresti includere fonti miniate delle tue lib quando possibile. Ora hai versioni non ancora risolte di react.js e Promise.js.

Sia react che es6-shim forniscono una versione minificata, che è già presente quando si esegue bower install. Per risolvere questo problema, il vostro compito dovrebbe essere simile:

... 
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(''))); 
    } 
... 

Questo vi fornirà un lib.js con librerie di terze parti solo minified con un cambio minimo per il vostro gulpfile.js.