Gulp-angort-filesort thực sự dùng để bơm gulp?

Question

Ai có thể cho thấy một ví dụ về những gì gulp-góc-filesort thực sự không và làm thế nào để sử dụng nó đúng cách?

Cái này là tôi vừa mới nhận ra rằng tôi ngụm-góc-filesort không loại angularjs file nào cả, tuy nhiên tôi AngularJS App với rất nhiều tác phẩm hoạt động tốt. Vì vậy, tôi đã đưa ra hai câu hỏi:

1. AngualarJs vẫn nhạy cảm với các tệp nguồn theo thứ tự? Đối với tôi, có vẻ như không phải vậy.
2. Loại tệp góc cạnh nào thực sự? Tôi không thể thấy bất kỳ kết quả nào của công việc của mình.

Tôi đã nghĩ rằng tệp hình ảnh góc cạnh nhìn vào các câu lệnh góc cạnh và phân loại theo phụ thuộc được chỉ định trong dấu ngoặc đơn. Có vẻ như tôi đã sai.

Vui lòng xem mẫu của tôi bên dưới.

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

Kết quả của ngụm-bơm như sau:

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

tôi đã được dự kiến ​​chính xác một thứ tự ngược để làm cho ứng dụng làm việc (tuy nhiên nó vẫn không làm việc). Vì vậy, bằng cách sử dụng tệp gulp-angular-filesort, chỉ cần sắp xếp các tệp theo thứ tự abc, mặc dù tất cả các phụ thuộc được chỉ định trong angular.module (..., [...])

Điều gì đang xảy ra ở đây?

Answer 1

Thực tế trong trường hợp của bạn, bạn không cần gulp-angular-filesort vì bạn khai báo mô-đun cho mỗi tệp. Cơ chế tiêm phụ thuộc cho góc sẽ tìm ra cách chính xác để gọi các mô-đun của bạn theo các phụ thuộc của bạn.

Bạn sẽ cần gulp-angular-filesort chỉ khi bạn có một mô-đun trải rộng trên nhiều tệp. Vì vậy, cho ví dụ của bạn nếu tất cả các tệp sử dụng 'myApp' làm tên mô-đun. Sau đó, các plugin sẽ sắp xếp các tập tin một cách chính xác: luôn luôn là một với phụ thuộc trước khi những người khác.

Ở đây ví dụ của bạn sửa đổi để gulp-angular-filesort là cần thiết:

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

Trong trường hợp này này vẫn sẽ là:

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

Answer 2

ngụm-góc-filesort di chuyển các tệp có chứa khai báo của mô-đun phía trên các tệp trong đó các mô-đun được đề cập.

Nếu module được đề cập trước đó tuyên bố, bạn sẽ nhận được lỗi như thế này:

• "angular.js: 68 Lỗi chưa gặp: [$ injector: nomod] Mô-đun 'MyApp' không có sẵn Bạn viết sai chính tả tên mô-đun hoặc quên tải nó. Nếu đăng ký một mô-đun đảm bảo rằng bạn chỉ định phụ thuộc làm đối số thứ hai. "

• "angular.js: 13.294 Lỗi: [ng: areq] Đối số 'MyController' không phải là một chức năng, đã không xác định"