GulpUglifyError: unable to minify JavaScript (Angular 4)

问题

I have a problem with uglify main bundle.js file.

This is my gulp scripts:

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));
});

After running this scripts I catch next exception:

[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"
    ]
}

I don't know how to resolve this problem. Any ideas how to resolve this problem?

回答1:

I found how to resolve this issue. Basically uglify doesn't work with ES6 (right now just with ES5). For resolving this problem we need to Transpilation result to ES5 with TypeScript help, and then run minification.

For example:

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

This part of code transpilation my current bundle code to ES5 and then run uglify() function for minification.

来源：https://stackoverflow.com/questions/43706367/gulpuglifyerror-unable-to-minify-javascript-angular-4

标签

angular

gulp

minify

gulp-uglify