GulpUglifyError: unable to minify JavaScript (Angular 4)

Question

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?

Taras Kovalenko · Accepted Answer · 2017-05-15 06:45:24Z

0

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.

answered May 15, 2017 at 6:45

Taras Kovalenko

2,3933 gold badges27 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

GulpUglifyError: unable to minify JavaScript (Angular 4)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related