Unexpected Token when trying to minimize code using Uglify

Question

I am running the following gulp task:

   var gulp = require('gulp');
   var uglify = require('gulp-uglify');
   var rename = require('gulp-rename');

    gulp.task('uglify', function(){
         gulp.src('htdocs/js/*.js')
             .pipe(uglify())
             .pipe(rename({suffix: '.min'}))
             .pipe(gulp.dest('dist'));
    });

When I do so I get the following error:

GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: punc «{», expected: punc «;»

It is failing on the first line of the first JavaScript file. The line it objects to is:

import {removeScoreButtons} from './display.js';

related: https://stackoverflow.com/questions/47632435/es6-import-module-with-gulp — yqlim, Aug 13 '19 at 14:15
Thanks @YongQuan. I am not using `gulp-babel` so do not see how this helps. Please can you explain how the questions are related in more detail. — Mike Poole, Aug 13 '19 at 14:19
Look at https://www.npmjs.com/package/terser , gulp-uglify doesn't support es6, terser does. — Mark, Aug 13 '19 at 14:45
Thanks for the comments and for your answer @pako. I was not aware that `gulp-uglify` was ES5 only. I am working in TypeScript so I will ask that to target ES5 instead. — Mike Poole, Aug 13 '19 at 14:58
@Mark I just took a look at `Terser`, seems to be very feature rich so tempted to use that instead. Many thanks for the tip. — Mike Poole, Aug 13 '19 at 15:04

score 1 · Accepted Answer · answered Aug 13 '19 at 14:43

If you have code in ES6 you have to transpile it to ES5 with gulp-babel before uglify. Something like this:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var babel = require('gulp-babel');

gulp.task('uglify', function(){
     gulp.src('htdocs/js/*.js')
         .pipe(babel({
            presets: ['@babel/env']
         }))
         .pipe(uglify())
         .pipe(rename({suffix: '.min'}))
         .pipe(gulp.dest('dist'));
});

Here you have more information: https://www.npmjs.com/package/gulp-babel

Unexpected Token when trying to minimize code using Uglify

1 Answers1