Gulp Uglify从Paper.js库生成奇怪的字符

Question

我在一个项目中使用了Paper.js的Bower包。我正在使用Gulp为浏览器准备项目。然而，在bower_components/paper/dist/paper-full.min.js中有一些字符看起来像这样:

xaaxb5xbaxc0-xd6xd8-xf6xf8-u02c1u02c6-u02d1u02e0-u02e4u02ec...

经过Gulp:

后的结果是这样的

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

导致控制台错误

未捕获SyntaxError:无效的正则表达式:/(一个ªµº€一个˜——¶¸ee†- E本部- E¤E¬E®我°-我´¶·我º我½__我ˆ我ŠœŽ我¡(更多奇怪的字符)范围的顺序字符类

这是我的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('')));
  },
...

我已经将问题隔离到流程的这一部分:

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

也就是说，注释掉这一行不会生成异常字符，也不会导致控制台错误。

uglify()方法似乎是规范的方法，要求如下:var uglify = require('gulp-uglify')。那么问题是什么呢?为什么是uglify()造成的?

Answer 1

这里的问题似乎是您正在丑化已经最小化的库。

一个更好的方法是不接触第三方库，只按原样连接它们。这意味着只要有可能，您应该包含最小化的库源。现在您有了react.js和Promise.js的完整版本。

react和es6-shim都提供了一个缩小的版本，在做bower install时已经到位了。要解决这个问题，您的任务应该看起来像:

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

这将为您提供一个lib.js，只有最小化的第三方库，并对您的gulpfile.js进行最小的更改。

Answer 2

而使用Unicode字符时，ascii_only参数需要设置为true。

在这种情况下，.pipe(uglify({output: {ascii_only:true}}))应该工作。

ascii_only(默认为false)——转义字符串和regexp中的Unicode字符(影响带有非ascii字符的指令无效)。糟蹋选择