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

Question

I am getting some strange error, but in order to suppress these error I have to change everything where I am getting error?

//gulp file code
var fs = require('fs');
var path = require('path');`enter code here`
var merge = require('merge-stream');
var gulp = require('gulp');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require('gulp-util');



gulp.task('css',function()
{

return gulp.src(['assets/css/*.css'])
    .pipe(sourcemaps.init())

    .pipe(sourcemaps.write())
    .pipe(uglify())
    .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
    .pipe(concat('all.css'))
    .pipe(gulp.dest('build/css'))

})
gulp.task('js',function()
{

return gulp.src(['shared/*.js','controller/*.js','directives/*.js','services/*.js'])
    .pipe(sourcemaps.init())

    .pipe(sourcemaps.write())
    .pipe(uglify())
    .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
    .pipe(concat('all.js'))
    .pipe(gulp.dest('build/js'))

})

gulp.task('default', ['css','js']);

I tried to find the solution online, but no luck

for (let k = 0; k < $scope.allCollctedTags.length; k++) 
{
 $scope.customtags.push($scope.allCollctedTags[k].text);
}

but if I replace let with var then this error removed now next error come for the following code:

$scope.multipleImages.push(...response.data.result.imageName);
but if i write it as below then this error disappear
$scope.multipleImages.push(response.data.result.imageName);

also if i use underscore js then also it give me error 
let temparray = _.difference($scope.multipleImages,$scope.extractedImagesBrowse);

Now what to do, I can do these things in one or two files but for the whole project I cannot do it.

Throwaway

#42375968 – Demented

Answer 1

Following this answer, what I found was that I tried to compile code that was not parsable with the ugilfy version that I had. Try using ugifly-es instead of pure uglify package:

const uglify = require("gulp-uglify");

To:

const uglify = require("gulp-uglify-es");

And make sure you have the package installed.

Also, if you don't want to use unsupported package, take a look at this answer as it covers your issue:

Almetaalmighty

For some reasons gulp-uglify-es also throws errors, use gulp-uglifyes. Thank you! – Rein

2020: Use terser / gulp-terser instead of uglify-es / gulp-uglifyes – Anya

Answer 2

If you use ES6 syntax, or a filter than parses your code into ES6 (like recent versions of gulp-coffee), gulp-uglify does not support that.

You can replace gulp-uglify by terser, which supports ES6.

https://www.npmjs.com/package/terser

Unwary

Actually the right module is gulp-terser, then you can add terser() to the gulp task (.pipe(terser()) – Compensable

Answer 3

if you're using gulp =< 3.x for whatever reason, gulp-terser will not work. In that case you can replace the

require('gulp-uglify');

with

require("gulp-uglify-es").default; 

At least in an older project that I was maintaining that did the trick, did not work without the default. (ps. you will also need to npm install --save-dev gulp-uglify-es if you haven't done it earlier).

This is a quick-fix that I discovered while updating some frontend dependencies which caused this to happen in the first place and should be intended for cases where the project has multiple gulp 3.x or lower transitive dependencies which would require upgrading and refactoring so much that it should be considered if at all plausible.

Jacal

Answer 4

I found "gulp-terser" to be the best solution which requires minimal code changes. For me, it just worked out of the box.

Install gulp-terser -> npm i gulp-terser -D

Change

const uglify = require('gulp-uglify');

to

const uglify = require('gulp-terser');

Apostolate