gulp-angular-filesort真正为gulp-inject做了什么？

Question

任何人都可以展示gulp-angular-filesort真正做什么以及如何正确使用它的例子吗？

问题是我最近意识到我的gulp -angular-filesort根本没有对angularjs文件进行排序,但是我的AngularJS App有很多文件可以正常工作.所以,我提出了两个问题:

1. AngualarJs仍然对源文件顺序敏感吗？对我来说,它看起来不是.
2. gulp-angular-filesort实际上做了什么？我看不到其工作的任何结果.

我认为gulp-angular-filesort根据括号中指定的依赖关系查看angular.module语句和排序文件.看起来我错了.

请看下面的示例.

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

gulp-inject的结果如下:

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

我期望完全相反的顺序使应用程序工作(但它仍然有效).所以,使用gulp-angular-filesort只是按字母顺序排序文件,尽管angular.module(...,[...]中指定了所有依赖项)

这里发生了什么？

Answer 1

实际上,在您的情况下,您不需要gulp-angular-filesort,因为您为每个文件声明了一个模块.angular的依赖注入机制将根据您的依赖关系确定调用模块的正确方法.

只有当一个模块分布在多个文件中时,才需要gulp-angular-filesort.因此,对于您的示例,如果所有文件都使用"myApp"作为模块名称.然后插件将正确排序文件:始终是依赖于其他文件的文件.

这里修改了你的例子,以便需要gulp-angular-filesort:

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

在这种情况下,这仍将是:

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