Angular 文件上的 Gulp 任务中断

Question

我已设置并运行 gulp 任务以创建 Angular 应用程序，它运行时没有错误并正确创建文件，但是当我在浏览器上加载页面时，我收到以下错误消息。

我是否缺少一些步骤或插件来让 Angular 文件全部“工作”？我已经使用了 angularFilesort() 和 ngAnnotate() 插件。

var bower = gulp.src(bower_files)
    .pipe(concat("bower-expanded.js"))
    .pipe(gulp.dest(paths.prod))
    .pipe(rename("bower.js"))
    .pipe(uglify())
    .pipe(gulp.dest(paths.prod + paths.js));        

// gather and compress the app's js files 
var app = gulp.src(paths.source + "app/**/*.js")
    .pipe(angularFilesort())
    .pipe(concat("app-expanded.js"))
    .pipe(ngAnnotate({          
          add: true,
          single_quotes: true
    }))
    .pipe(gulp.dest(paths.prod))
    .pipe(rename("app.js"))
    .pipe(uglify())
    .pipe(gulp.dest(paths.prod + paths.js));

错误是

TypeError: (intermediate value)(...) is not a function
(function(angular) {

指向这些代码行

(function(angular) {
  'use strict';

  /**
   * Called with an array this acts like map, otherwise it acts like _.mapValues
   * in lodash.
   * @return {Array|Object} The same type as the input argument.
   */
  var mapValues = function(obj, callback) {
    if (angular.isArray(obj))

另一个错误是

Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module angularSpinner due to:
[$injector:nomod] Module 'angularSpinner' is not available! 
You either misspelled the module name or forgot to load it. 
If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.4/$injector/nomod?p0=angularSpinner

Answer 1

我注意到您没有在 Bower 组件上运行 ngAnnotate，但您在它们上运行 uglify。这可能会导致您的问题。

试试：

var bower = gulp.src(bower_files)
    .pipe(concat("bower-expanded.js"))
    .pipe(ngAnnotate({          
      add: true,
      single_quotes: true
    }))
    .pipe(gulp.dest(paths.prod))
    .pipe(rename("bower.js"))
    .pipe(uglify())
    .pipe(gulp.dest(paths.prod + paths.js));

顺便说一句，将所有依赖项连接到一个文件中并不是一个好主意。浏览器可以处理异步加载多个 JS 文件，并且比加载单个海量 JS 文件要快得多。

Answer 2

在阅读了 SO 中的各种答案后，第一个错误通常是指在错误之前的行中忘记了 ;。
您可以将 concat 任务配置为使用 ; 作为 js 文件的分隔符来避免这种情况。

第二个我同意@ShaunScovil，同样使用每个 bower 包提供的.min 文件更安全。

您可以利用这个main-bower-files 包来根据env 进行设置，并自动构建所有bower 依赖项的一个或多个文件的过程。

Answer 3

同样的事情发生在 GruntJS 上，我最近学会了如何解决它。确保你所有的 Angular js 控制器、指令和过滤器都有正确的包含。

示例不起作用：

angular.module('uniApp').directive('autoFocus', function ($timeout) {
   return function (scope, element, attrs) {
    scope.$watch(attrs.autoFocus,
      function (newValue) {
          $timeout(function () {
              element.focus();
          });
      }, true);
   };
});

请注意上面的 $timeout 没有正确包含？

示例将起作用：

angular.module('uniApp').directive('autoFocus',['$timeout', function ($timeout) {
   return function (scope, element, attrs) {
    scope.$watch(attrs.autoFocus,
      function (newValue) {
          $timeout(function () {
              element.focus();
          });
      }, true);
   };
}]);

现在 $timeout 已正确包含在内。请务必检查所有控制器、过滤器和指令的这些小细节。