Question

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

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

经过Gulp之后最终会这样结束：

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

导致控制台错误

未捕获的SyntaxError：无效的正则表达式：/ [ÂªÂÂÂÂÂÂÃÂ-Ã-Ã-Ã〜-Ã¶Ã¸-ËË†-Ë'Ë-Ë¤Ë¬Ë®Í°-Í'Í¶Í·Íº-Í½Î †Î-ÎÎÎÎÎÎÎ-Î¡[更多奇怪的字符]字符类中的范围乱序

以下是我的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()方法seems to be the canonical one，如下所示：var uglify = require('gulp-uglify')。所以有什么问题？为什么uglify()会导致这种情况？

Answer 1

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

更好的方法是不要触摸第三方库，只能按原样连接它们。这意味着您应尽可能包含libs的缩小源。您现在拥有react.js和Promise.js的未经授权的版本。

反应和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）-转义字符串和正则表达式中的Unicode字符（影响带有非ascii字符的指令无效）。 Uglify options

Gulp Uglify从Paper.js图书馆制作奇怪的角色

2 个答案: