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

【问题标题】：Grunt specify order of injected files in index.htmlGrunt 在 index.html 中指定注入文件的顺序
【发布时间】：2015-04-23 07:14:29
【问题描述】：

我正在为我的一个项目使用 angular-fullstack yeoman 生成器，如果我运行 grunt build，我的 index.html 将被 grunt-injector 找到的注入依赖项覆盖。问题是我想以特定顺序指定某些模块的加载，或者我只想忽略特定文件夹。我怎样才能做到这一点？目前，一些 javaScript 文件的加载顺序错误，每次运行 grunt build 时都会出错。

【问题讨论】：

标签： gruntjs yeoman angular-fullstack

【解决方案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

即使有点晚了，我希望它有所帮助:-)

【讨论】：

【解决方案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())

【讨论】：

【解决方案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）中的所有文件之后呈现在文件中。

【讨论】：