Question

一些背景

我正在使用gulp作为我正在处理的angular2应用程序的任务运行器。这个应用程序还使用角度的材料设计库。我也使用Hammer.js进行移动手势支持。所有这些都在VS2015更新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);
        });
});

看来gulp minification（uglify）在遇到angular2库时会遇到问题。有没有人有一个使用gulp来缩小Angular2库的工作示例？例如，图书馆。将是@angular，@angular2-material，systemjs'，hammer.js，rxjs 我如何与gulp uglify？我想减少下图中的数字。

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'也适用（针对此特定情况）

Answer 2

我刚刚注意到没有人谈论过您尝试压缩的代码/ uglify包含ES6 / ES2015中的代码。

UglifyJs2不支持处理ES6 / ES2015缩小版。但是，UglifyJs2的Harmony分支确实处理了它。

尝试使用以下内容替换package.json中的@Override protected void onPreExecute() { progress = new ProgressDialog(UpdateActivity.this); progress.setCancelable(false); progress.setMessage("Please wait data is Processing"); progress.show(); } @Override protected void onPostExecute(Void aVoid) { super.onPostExecute(aVoid); progress.dismiss(); }引用。它适用于我的解决方案。

def application do [mod: {MyApp, []}, applications: [:phoenix, :phoenix_pubsub, :phoenix_html, :cowboy, :logger, :gettext, :phoenix_ecto, :postgrex, :memcache_client]] # add memcache_client here

希望它有所帮助！

Angular2的gulp uglification throw错误

2 个答案: