Task Gulp che interrompe file angolari

Question

Ho l'attività gulp impostata e in esecuzione per creare un'app Angolare e viene eseguita senza errori e crea i file correttamente, ma quando carico la pagina su un browser, ricevo i seguenti messaggi di errore .

C'è qualche passo o qualche plugin che mi manca per far funzionare "tutti" i file Angular? Ho già utilizzato i plugin angularFilesort() e 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)); 

Gli errori sono

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

che punta a queste righe di codice

(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)) 

L'altro errore è

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

ho notato che non stai eseguendo ngAnnotate sul tuo pergolato c omponents, ma stai utilizzando uglify su di essi. Questo potrebbe causare il tuo problema.

Prova:

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)); 

Per inciso, non è un'idea impressionante per concatenare tutte le dipendenze in un unico file. Il browser può gestire in modo asincrono il caricamento di più file JS e lo farà molto più velocemente del caricamento di un singolo file JS.

Answer 2

Dopo aver letto varie risposte in SO, il primo errore di solito si riferisce a un ; dimenticato nelle righe precedenti all'errore.
È possibile configurare l'attività concat per utilizzare ; come separatore per i file js per evitare ciò.

Sul secondo sono d'accordo con @ShaunScovil, anche l'utilizzo dei file .min forniti da ciascun pacchetto Bower è più sicuro.

È possibile utilizzare questo pacchetto main-bower-files per impostarlo in base allo env e automatizzare il processo di creazione di uno o più file di tutte le dipendenze di bower.

Answer 3

Questa stessa cosa accade con GruntJS e di recente ho imparato come risolverlo. Assicurati che tutti i tuoi controller, direttive e filtri angolari js includano correttamente.

Esempio abituato lavoro:

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

Avviso di quanto sopra come il $ timeout non è adeguatamente incluso?

Esempio funzionerà:

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

Ora il $ timeout è correttamente compreso. Assicurati di controllare questo piccolo dettaglio su tutti i controller, i filtri e le direttive.