Gulp-uglify untured错误:[$注射器:Modulerr]

Question

试图丑化JS文件。当我在index.html中使用捆绑文件时。我以下是错误。

下面是我的湾文件。

'use-strict'
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var exec = require('gulp-exec');
var ngAnnotate = require('gulp-ng-annotate');
const babel = require('gulp-babel');
var exec = require('child_process').exec;
gulp.task('scripts', function () {
return gulp.src(['vzrth.js','psrhs.js'])
.pipe(ngAnnotate())
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(concat('bundle.js'))
    .pipe(uglify().on('error', function (e) {
      console.log(e);
    }))
    .pipe(gulp.dest('./client'));
});
gulp.task('nodestart', function (cb) {
  exec('node ./bin/www', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
})
gulp.task('default', ['scripts', 'nodestart']);

我遇到的错误是：

参考错误：未接收错误：[$注射器：Modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr？p0=e

Answer 1

当您缩小角文件时，您需要意识到依赖项注入（DI）如果不正确完成。

这是带有DI的控制器的不安全示例：

.controller('MyController', function($scope, $timeout) {
    $scope.title = 'Minify me';
});

这是与di的同一控制器的简化示例：

.controller('MyController', ['$scope', '$timeout', function ($scope, $timeout) {
   $scope.title = 'Minify me';
}]);

为什么第一个示例在缩小时断开？

缩小javaScript文件时，函数中的参数将缩小到更简单的内容，因此缩小后的控制器是：首先是不安全的示例：

.controller('MyController', function(a, b) {
    a.title = 'Minify me';
});

您可以看到， $ scope 被缩小到 a 。 A 对Angular没什么意思（除非您实际上定义为 a ）。

现在缩小安全示例：

.controller('MyController', ['$scope', '$timeout', function (a, b) {
       a.title = 'Minify me';
    }]);

在此示例中，Angular知道第一个参数实际上是 $ scope ，因为字符串字面的字体不会被缩小。

编辑：

如果您声明这样的控制器或指令（缩小不安全）：

.controller('MyController', controller);
function controller($scope, $timeout) {
   $scope.title = 'Minify me'
}

这将变成（方法1）：

.controller('MyController', controller);
controller.$inject = ['$scope', '$timeout'];
function controller($scope, $timeout) {
   $scope.title = 'Minify me'
}

否则将变成（方法2）

.controller('MyController', ['$scope','$timeout', controller]);
function controller($scope, $timeout) {
   $scope.title = 'Minify me'
}

Answer 2

上述答案已经过时，现在可以通过使用ngannotate来解决此问题。可以这样做：

 .pipe(concat('app.js'))
 .pipe(ngAnnotate())
 .pipe(uglify())
 .pipe(gulp.dest('./gulp/js'))

首先限制文件，然后使用ngannotate，然后使用uglify。您将需要" Gulp-ng Annotate"：

var ngAnnotate = require('gulp-ng-annotate');

ngannotate将解决您的依赖性问题。