GulpUglifyError: unable to minify JavaScript (Angular 4)

Question

我对 uglify 主 bundle.js 文件有问题。

这是我的 gulp 脚本：

gulp.task("compile", () => {
    let tsResult = gulp.src("app/**/*.ts")
        .pipe(sourcemaps.init())
        .pipe(tsProject());
    return tsResult.js
        .pipe(sourcemaps.write(".", { sourceRoot: '/app' }))
        .pipe(concat('bundle.js'))
        .pipe(gulp.dest('app/_Dist/'));
});

gulp.task("minify", ["compile"], function () {
    return gulp.src(['app/_Dist/bundle.js'])
        .pipe(concat('bundle.min.js'))
        .pipe(plumber())
        .pipe(uglify())
        .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
        .pipe(plumber.stop())
        .pipe(gulp.dest(outputLocation));
});

在运行这个脚本之后我捕获了下一个异常：

[15:16:20] [Error] GulpUglifyError: unable to minify JavaScript Caused by: SyntaxError: Unexpected token: punc (:) File: C:\Projects\AngGulpApp\app\_Dist\bundle.min.js Line: 1

tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "noEmitOnError": false,
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "lib": [ "es2015", "dom" ],
        "baseUrl": ".",
        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "exclude": [
        "gulpfile.ts",
        "node_modules"
    ]
}

我不知道如何解决这个问题。有解决此问题的想法吗？

Answer 1

我找到了解决这个问题的方法。基本上 uglify 不适用于 ES6（现在仅适用于 ES5）。为了解决这个问题，我们需要在 TypeScript 的帮助下 Transpilation 结果为 ES5，然后运行缩小。

例如：

var ts = require('gulp-typescript');
var uglify = require('gulp-uglifyjs');
....
.pipe(ts({
    target: "es5",
    allowJs: true,
    module: "commonjs",
    moduleResolution: "node"
}))
.pipe(uglify())

这部分代码将我当前的捆绑代码转译为 ES5，然后运行 uglify() 函数进行缩小。

GulpUglifyError: unable to minify JavaScript (Angular 4)

GulpUglifyError: unable to minify JavaScript (Angular 4)

minify

gulp

gulp-uglify

angular