8

任何人都可以举例说明 gulp-angular-filesort 的真正作用以及如何正确使用它吗？

问题是我最近意识到我的 gulp -angular-filesort根本不对angularjs文件进行排序，但是我的 AngularJS 应用程序有很多文件工作正常。所以，我想出了两个问题：

  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(...,[...]) 中指定了所有依赖项

这里发生了什么？

4

2 回答 2

11

实际上，在您的情况下，您不需要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
于 2016-03-21T16:48:51.287 回答
4

gulp-angular-filesort将包含模块声明的文件移动到提到模块的文件之上。

如果模块在声明之前被提及，你会得到如下错误：

  • “angular.js:68 未捕获的错误：[$injector:nomod] 模块'myApp'不可用！您拼错了模块名称或忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。 "

  • “angular.js:13294 错误：[ng:areq] 参数 'MyController' 不是函数，未定义”

于 2016-03-24T05:49:51.700 回答