Grunt 指定 index.html 中注入文件的顺序

Question

我正在为我的一个项目使用角度全栈 yeoman 生成器，如果我运行 grunt 构建我的索引.html会被 grunt-injector 找到的注入依赖项覆盖。问题是我想按特定顺序指定某些模块的加载，或者我只想忽略特定文件夹。我该怎么做？目前，一些javaScript文件以错误的顺序加载，每次我运行grunt构建时都会收到错误。

Answer 1

您可以使用数组来指定顺序，例如

// Inject application script files into index.html
scriptsVendor: {
    options: {
      transform: function(filePath) {
        filePath = filePath.replace('/app/', '');
        return '<script src="' + filePath + '"></script>';
      },
      starttag: '<!-- injector:js -->',
      endtag: '<!-- endinjector -->'
    },
    files: {
      'app/index.html': [
        [
          'app/lib/js/jquery.js',
          'app/lib/js/bootstrap.js',
          'app/lib/js/angular.js'
        ],
        [
          'app/lib/js/angular-*.js',
          'app/lib/js/ui-*.js'
        ]
      }
    }

所以我在jquery之前加载然后bootstrap，angular.在下一个块中，所有以 angular- 和 ui- 开头的角度模块。

忽略某些文件或文件夹

!app/lib/js/*.min.js
!app/lib/js/folder_to_ignore/*.js

即使有点晚了，我也希望它有所帮助：-）

Answer 2

在我的情况下，我有几个角度模块，带有配置和运行函数，分别分布在三个文件中，分别称为xyz.module.js，xyz.config.js，xyz.run.js

Gulp 搜索所有.js文件："**/*.js"，注入时使用字母顺序，因此 *.module.js 在 *.config.js 之后加载，这会产生有关缺少 xyz 模块定义的错误。

所以顺序应该切换。我不想使用硬编码数组，我想继续使用通配符。

在我的情况下这样做的解决方案：https://ww

用法（在 gulpfile 中）：

var angularFilesort = require('gulp-angular-filesort');
gulp.src(['./src/app/**/*.js']).pipe(angularFilesort())

Answer 3

只是为了标记 @felix-at-housecat 的答案，我需要确保angular-translate-handler-log.js在 angular-translate.js 之后呈现，但由于字母排序，它会在之前显示。为了实现这一点，我按如下方式设置了喷油器：

injector: {
    dev: {
        files: {
            'dist/static/index.html': [
                [
                    'dist/static/js/lib/jquery.js',
                    'dist/static/js/lib/bootstrap.js',
                    'dist/static/js/lib/angular.js',
                    'dist/static/js/lib/angular-*.js',
                    'dist/static/js/lib/angularjs*.js',
                    . . .
                     '!dist/static/js/lib/angular-translate-handler-log.js'
                ],
                [
                    'dist/static/js/lib/angular-translate-handler-log.js'
                ]
            ]
        },
. . .

现在，/angular-translate-handler-log.js将在第一个数组（包括 angular-translate.js）中的所有文件之后呈现在文件中。