глотком uglification бросали ошибки для Angular2

Question

Некоторые Фоновая

Я использую глотка, как моя задача бегуна для этого 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); 
     }); 
}); 

Похоже глотком минификация (уродовать) работает с проблемами, когда встретив angular2 библиотек. У кого-нибудь есть рабочий пример использования глотки для минимизации библиотек Angular2? библиотеки, например. будет @angular, @angular2-material, systemjs ', hammer.js, rxjs Как угадать с глотком? Я хочу уменьшить цифры на изображении ниже.

Answer 1

Вы должны использовать модуль загрузки через 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)

Answer 2

Я только что заметил, что никто не говорил о том, что код, который вы пытаетесь сжать/uglify, содержит код в ES6/ES2015.

UglifyJs2 не имеет поддержки для управления ES6/ES2015. Тем не менее, ветвь Harmony UglifyJs2 справляется с этим.

Попробуйте заменить uglify-js ссылку в вашем пакете.json со следующим. Он работал с моим решением.

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

Надеется, что это помогает!