angular - Angular2 的 gulp 丑化抛出错误

Question

一些背景

我正在使用 gulp 作为我正在处理的这个 angular2 应用程序的任务运行程序。此应用程序还使用了 Angular 的 Material 设计库。我还使用 Hammer.js 来支持移动手势。所有这些都在 VS2015 update 3 中完成。

问题领域

这是导致问题的我的 gulp 脚本的部分片段

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 任务更改为下面的这个时，一切正常，应用程序在浏览器中按预期工作。

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 库时，gulp 缩小(uglify)似乎遇到了问题。有没有人有使用 gulp 缩小 Angular2 库的工作示例？例如图书馆。将是 @angular, @angular2-material, systemjs', hammer.js, rxjs 我如何使用 gulp 进行丑化？我想缩小下图中的数字。

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' 也可以(对于这种特定情况)