Gulp-Uglify - Unable to minify Javascript Angular 1.6.8

Question

Hi I am trying to minify my app.js file using gulp uglify, I used pump to get error details and it gives me an error on Line 2

GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: name (app)
File: /Users/Alexander/OneDrive/Alexander/scripts/app.js
Line: 2

Where as Line 2 in my app.js is let app = angular.module("app", ["ngRoute"]);

here is my complete app.js file

let app = angular.module("app", ["ngRoute"]);


app.config(function ($routeProvider) {
   $routeProvider

       .when("/",{
           templateUrl : "templates/home.html"
       })

       .when("/resume",{
           templateUrl: "templates/resume.html"
       })

       .when("/contact",{
           templateUrl: "templates/contact.html"
       });

});

app.controller("MainController",["$scope", function ($scope) {

    $scope.name = "Alexander Personal Website";

}]);

here is my gulpfile.js

var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var pump = require('pump');
gulp.task('compress', function (cb) {
    pump([
            gulp.src('scripts/*.js'),
            uglify(),
            gulp.dest('app')
        ],
        cb
    );
});

I have seen the Question where it says uglify doesn't work with es6 but the line where I am getting the error is also same for es5.

I hope enough detail is there. Thank you for looking into this issue.

Yes it worked :). Can you please write an answer and tell why var works on let. Thanks! — Alexander, Feb 11 '18 at 17:35

Dipak · Accepted Answer · 2018-02-11T18:25:32.723

What is var and let?

The scope of a variable defined with var is function scope or declared outside any function, global.

The scope of a variable defined with let is block scope.

In ES6, introduce let. Generally all browsers support ES6 syntax, but the plugins which have already built on earlier version, it throws an error. Probably the main reason is behind your error.

Since our code may going to uglify by gulp-uglify module and there is not support of ES6. If our simple code run with let in browser, then it will not throw an error.

So question what should do?

To use ES6 features will have to transpile our ES6 code to ES5 so that it could run seamlessly on our current browsers. There are several tools out there that could do this task, and for this tutorial, we’ll be using Babel.

We’ll also bundle all of our source javascript files into one single file using a module bundling tool called Webpack. Support for Babel through Webpack is available in the form of plugins, and we’ll use them to automate the transpilation task. This means once we configure these plugins, we just have to write ES6 code and Webpack will take care of the rest.

Gulp-Uglify - Unable to minify Javascript Angular 1.6.8

1 Answers1