gulp-uglify is creating bad javascript

Question

I am working with AngularJS, and I have my application JS setup like the following.

var userApp = angular.module('userApp',['ngRoute','ngAnimate', 'bw.paging', 'appConfig', 'userControllers']);

userApp.run(function($rootScope, $location) { 
    $rootScope.pagination = { };
});

userApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
}]);

userApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'partials/index.html', 
            controller : 'IndexController' 
        })
        .otherwise({ 
            templateUrl : 'partials/routeNotFound.html', 
            controller : 'NotFoundController' 
        });
}]);

var userControllers = angular.module('userControllers', []);

I then proceed to lint this JS file as follows using gulp.

gulp.task('lint1', function() {
    gulp.src('test.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

I get no errors reported. Next, I proceed to minify this using gulp-uglify.

gulp.task('minify1', function() {
    gulp.src('test.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

I get a minified output. However, when I use the minified output in my html application, I get an AngularJS error. When I beautify the uglified JS back (via jsbeautifier.org), I see the following result.

var userApp = angular.module("userApp", ["ngRoute", "ngAnimate", "bw.paging", "appConfig", "userControllers"]);
userApp.run(function(r, e) {
    r.pagination = {}
}), userApp.config(["$httpProvider", function(r) {
    r.defaults.useXDomain = !0
}]), userApp.config(["$routeProvider", function(r) {
    r.when("/", {
        templateUrl: "partials/index.html",
        controller: "IndexController"
    }).otherwise({
        templateUrl: "partials/routeNotFound.html",
        controller: "NotFoundController"
    })
}]);
var userControllers = angular.module("userControllers", []);

As you can see, there are commas , where there should be semi-colons ;. Is my input JS file bad or did gulp-uglify mess things up? How do I fix this problem?

Unrelated to your question, there are some other issues with your code, like use of `.config` twice and the use of `$rootScope` — Blowsie, Sep 07 '15 at 11:16
`alert(1), alert(2);` is perfectly valid javascript. I don't see a problem with the translation by uglify. You should take a read of this: https://javascriptweblog.wordpress.com/2011/04/04/the-javascript-comma-operator/ — spender, Sep 07 '15 at 11:20
@Blowsie How do I fix those problems? For `.config`, I can put them in one configuration like `userApp.config(['$httpProvider', '$routeProvider', function($httpProvider, $routeProvider) { ... }])`. Would this be "better"? I am not sure what you mean when you say there is an issue with `$rootScope` however. That is where I store global variables for paging in different routes and when navigating to and from the routes (I want to maintain state). — Jane Wayne, Sep 07 '15 at 11:38

score 2 · Accepted Answer · answered Sep 07 '15 at 11:11

2

Change:

userApp.run(function($rootScope, $location) { 
    $rootScope.pagination = { };
});

to:

userApp.run(['$rootScope', '$location', function($rootScope, $location) { 
    $rootScope.pagination = { };
}]);

answered Sep 07 '15 at 11:11

Sergey Ilinsky

31,255
9
54
56

That works. I need 6 more minutes to accept your answer. One question, I thought it was because of the comma `,` versus semi-colon `;` thing, but after trying what you suggested, though it works, I still see the commas instead of semi-colon. I suppose then, this problem is one with AngularJS and not JS or `gulp-uglify`? – Jane Wayne Sep 07 '15 at 11:19
@JaneWayne my answer provides some clarification. – Blowsie Sep 07 '15 at 11:22
@JaneWayne the code generated by uglify is perfectly valid. – Blowsie Sep 07 '15 at 11:24
It's a shame that there's almost no pointer in the question to this answer, because the question is essentially asking about an unrelated issue. – spender Sep 07 '15 at 11:48

Blowsie · Answer 2 · 2015-09-07T11:19:51.123

The problem is not uglify it is your own code. It is breaking Angular's dependency injection;

userApp.run(function($rootScope, $location) { 
    $rootScope.pagination = { };
});

should be

userApp.run(['$rootScope', '$location', function($rootScope, $location) { 
    $rootScope.pagination = { };
}]);

Alternatively, you could use ng-annotate which will handle this dependency injection problem for you. https://www.npmjs.com/package/gulp-ng-annotate

score 0 · Answer 3 · edited Mar 01 '22 at 18:30

we have found the same issue using gulp-uglify and underwood Uglify-js. After a long research we found the problem, gulp-uglify have ha weak dependency on Latest 3.x.x Uglify-js, the new version v3.15.0 start to change beaviours and start to write the js using ',' in the place of ';'.

The minified js probably is correct to, but in hour case the javascript result is non 100% compatible, in a few browsers our code have some issues. We fix it forcing NPM to solve the dependency to v3.14.5 (last with old behavior) with npm-force-resolutions and using package-lock.json.

gulp-uglify is creating bad javascript

3 Answers3