Che cosa fa veramente gulp-angular-filesort per gulp-inject?

Question

Qualcuno può mostrare un esempio di cosa veramente fa gulp-angular-filesort e come usarlo correttamente?

Il fatto è che ho capito che la mia recente gulp-angolare filesort non sorta angularjs file a tutti, ma il mio AngularJS App con un sacco di file funziona bene. Quindi, ho trovato due domande:

1. AngualarJs è ancora sensibile per l'ordine dei file di origine? Quanto a me, sembra che non lo sia.
2. Cosa fa realmente gulp-angular-filesort? Non riesco a vedere alcun risultato del suo lavoro.

Ho pensato che gulp-angular-filesort guarda le istruzioni angular.module e ordina i file in base alla dipendenza specificata tra parentesi. Sembra che mi sbagliavo.

Si prega di guardare il mio esempio qui sotto.

// file: Gulpfile.js

'use strict'; 

var 
    gulp = require('gulp'), 
    connect = require('gulp-connect'), 
    angularFilesort = require('gulp-angular-filesort'), 
    inject = require('gulp-inject'); 


gulp.task('default', function() { 

    gulp.src('app/index.html') 
     .pipe(inject(
      gulp.src(['app/js/**/*.js']).pipe(angularFilesort()), 
      { 
       addRootSlash: false, 
       ignorePath: 'app' 
      } 
     )) 
     .pipe(gulp.dest('app')) 
    ; 

    connect.server({ 
     root: 'app', 
     port: 8081, 
     livereload: true 
    }); 

}); 

//a_services.js

'use strict'; 

angular.module('myServices', []) 
    .factory('MyService', function() { 
     return { 
      myVar:1 
     }; 
    }) 
; 

//b_controllers.js

'use strict'; 

angular.module('myControllers', ['myServices']) 
    .controller('MyController', function ($scope, MyService) { 
     $scope.myVar = MyService.myVar; 
    }) 
; 

// c_app.js

'use strict'; 

angular.module('myApp', ['myControllers']); 

Il risultato di gulp-inject è la seguente:

<!-- inject:js --> 
<script src="js/c_app.js"></script> 
<script src="js/b_controllers.js"></script> 
<script src="js/a_services.js"></script> 
<!-- endinject --> 

mi aspettavo esattamente un ordine opposto a far funzionare l'app (ma lo fa ancora di lavoro). Quindi, l'uso di gulp-angular-filesort ordina semplicemente i file alfabeticamente, nonostante tutte le dipendenze specificate nel angular.module (..., [...])

Cosa sta succedendo qui?

Answer 1

In realtà nel tuo caso non è necessario gulp-angular-filesort perché si dichiara un modulo per ogni file. Il meccanismo di iniezione delle dipendenze per angolare determinerà il modo corretto di chiamare i moduli in base alle dipendenze.

Avrete bisogno di gulp-angular-filesort solo quando un modulo è distribuito su più file. Quindi per il tuo esempio se tutti i file utilizzano "myApp" come nome del modulo. Quindi il plugin ordinerà i file correttamente: sempre quello con dipendenze prima degli altri.

Qui la vostra esempio modificato in modo che gulp-angular-filesort è necessario:

//a_services.js

'use strict'; 

angular.module('myApp') 
    .factory('MyService', function() { 
     return { 
      myVar:1 
     }; 
    }) 
; 

//b_controllers.js

'use strict'; 

angular.module('myApp') 
    .controller('MyController', function ($scope, MyService) { 
     $scope.myVar = MyService.myVar; 
    }) 
; 

// c_app.js

'use strict'; 

angular.module('myApp', []); 

In questo caso sarà ancora:

1. c_app.js
2. b_controller.js
3. a_service.js

Answer 2

sorso-angolare filesort sposta i file contenenti la dichiarazione del modulo sopra i file in cui sono menzionati i moduli.

Se il modulo è accennato prima ha dichiarato, avrete ottenuto errori come questi:

• "angular.js: 68 errore non rilevato: [$ iniettore: nomod] Module 'myApp' non è disponibile ! Hai sbagliato a scrivere il nome del modulo o hai dimenticato di caricarlo. Se registri un modulo, assicurati di specificare le dipendenze come secondo argomento. "

• "angular.js: 13294 Errore: [ng: areq] Argomento 'MyController' non è una funzione, ha ottenuto indefinito"