一飲而盡醜化拋出錯誤Angular2

我使用一飲而盡作爲我對我工作的這個angular2應用任務運行。這個應用程序還使用角的材料設計庫。我也使用Hammer.js進行移動手勢支持。所有這一切都在VS2015更新完成3

問題區域

這是我一飲而盡腳本的部分片段，這是造成問題

var ts = require('gulp-typescript'); 
var gulp = require('gulp'); 
var clean = require('gulp-clean'); 
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify'); 
var rename = require('gulp-rename'); 

gulp.task("scripts",() => { 
    gulp.src([ 
      'core-js/client/**',    
      'systemjs/dist/system.src.js', 
      'reflect-metadata/**', 
      'rxjs/**', 
      'zone.js/dist/**', 
      '@angular/**', 
      'jquery/dist/jquery.*js', 
      'bootstrap/dist/js/bootstrap.*js', 
      '@angular2-material/**/*', 
      'lodash/*.js' 
    ], { 
     cwd: "node_modules/**" 
    }) 
     .pipe(concat('scripts.js')) 
     .pipe(gulp.dest('lib-min')) 
     .pipe(rename('scripts.min.js')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('lib-min')) 
     .on('finish', function() { 
      console.log('Done!'); 
      process.exit(0); 
     }); 
});

我得到一個錯誤，當我包括管道到uglify()串聯工作得很好。我得到的錯誤是：

events.js:141 
     throw er; // Unhandled 'error' event 
    ^
GulpUglifyError: unable to minify JavaScript 
    at createError (C:\my-web\node_modules\gulp-uglify\lib\create-error.js:6:14) 
    at wrapper (C:\my-web\node_modules\lodash\_createHybrid.js:87:15) 
    at trycatch (C:\my-web\node_modules\gulp-uglify\minifier.js:26:12) 
    at DestroyableTransform.minify [as _transform] (C:\my-web\node_modules\gulp-uglify\minifier.js:76:19) 
    at DestroyableTransform.Transform._read (C:\my-web\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:159:10) 
    at DestroyableTransform.Transform._write (C:\my-web\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:147:83) 
    at doWrite (C:\my-web\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:313:64) 
    at writeOrBuffer (C:\my-web\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:302:5) 
    at DestroyableTransform.Writable.write (C:\my-web\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:241:11) 
    at Transform.ondata (_stream_readable.js:542:20) 
Process terminated with code 1.

當我改變了一口任務，這下面的一切工作正常和應用程序的工作按預期在瀏覽器中。

gulp.task("scripts",() => { 
    gulp.src([ 
      'core-js/client/**',    
      'systemjs/dist/system.src.js', 
      'reflect-metadata/**', 
      'rxjs/**', 
      'zone.js/dist/**', 
      '@angular/**', 
      'jquery/dist/jquery.*js', 
      'bootstrap/dist/js/bootstrap.*js', 
      '@angular2-material/**/*', 
      'lodash/*.js' 
    ], { 
     cwd: "node_modules/**" 
    }) 
     .pipe(gulp.dest('lib-min')) 
     .on('finish', function() { 
      console.log('Done!'); 
      process.exit(0); 
     }); 
});

看起來gulp minification（uglify）在遇到angular2庫時遇到了問題。有沒有人有一個使用gulp來縮小Angular2庫的工作示例？庫的例如。將是@angular,@angular2-material,systemjs'，hammer.js,rxjs 如何uglify與吞噬？我想減少下圖中的數字。

來源

2016-10-07 user20358

像'rxjs/**'這樣的Globs將包含** everything **，而不僅僅是JavaScript文件。當然'uglify（）'會拋出，如果你餵它廢話。 –

不是角度2所需的全部嗎？如果不是，那麼忽略那些不需要的東西並處理剩下的東西的方式是什麼？ – user20358

你應該通過systemjs使用模塊加載。那麼你只是擔心捆綁你自己的文件。

例systemjs.config.js

(function (global) { 
System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/', 
     'bower': 'bower_components/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 
     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     // other libraries 
     'rxjs': 'npm:rxjs', 
     'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api' 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
      main: './app/main.js', 
      defaultExtension: 'js' 
     }, 
     rxjs: { 
      defaultExtension: 'js' 
     }, 
     'angular2-in-memory-web-api': { 
      main: './index.js', 
      defaultExtension: 'js' 
     } 
    } 
}); 
})(this);

在你的劇本我也相信

改變 'rxjs/' 到 'rxjs/ /*.js' 也將工作（對於該特定case）

來源

2016-10-13 17:42:04

我剛剛注意到，沒有人談論過您要壓縮的代碼/ uglify包含ES6/ES2015中的代碼。

UglifyJs2不支持處理ES6/ES2015縮小。但是，UglifyJs2的Harmony分支處理它。

嘗試使用以下命令替換package.json中的uglify-js引用。它適用於我的解決方案。

"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony",

希望它能幫助！

來源

2017-02-07 10:20:57

一飲而盡醜化拋出錯誤Angular2

回答

相關問題