javascriptangularjsgulpgulp-uglify

gulp-uglify is creating bad javascript


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?


Solution

  • Change:

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

    to:

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