Question

我正在使用AngularJS，我的应用程序JS设置如下。

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', []);

然后我使用gulp继续lint这个JS文件。

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

我没有报告任何错误。接下来，我使用gulp-uglify继续缩小此项。

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

我得到一个缩小的输出。但是，当我在我的html应用程序中使用缩小的输出时，我收到AngularJS错误。当我美化丑陋的JS（通过jsbeautifier.org）时，我看到了以下结果。

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", []);

正如您所看到的，有逗号,，其中应该有分号;。我输入的JS文件是坏的还是gulp-uglify搞砸了？我该如何解决这个问题？

Answer 1

变化：

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

为：

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

Answer 2

问题不在于uglify它是你自己的代码。它打破了Angular的依赖注入;

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

应该是

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

或者，你可以使用ng-annotate来处理这个依赖注入问题。 https://www.npmjs.com/package/gulp-ng-annotate

gulp-uglify正在创建糟糕的javascript

2 个答案: