Grunt 索引任务 src 通配顺序

Question

我正在使用 VS2015 和一个 grunt 任务来获取我项目中的所有 java-脚本文件，并在 build 之前将它们写入我的模板 index.html。我遇到的问题是文件相互依赖的顺序。例如，我需要在 ui-bootstrap-tpls.js 之前创建一个脚本 src='' to angular.js 否则我会得到引用错误。索引任务 src 通配符正在获取 'an order' 中的文件，但它不适用于依赖关系图。有没有一种方法可以自定义此顺序，而无需单独写出每个子目录，并且在将来添加新依赖项（即我不必添加新目录）时破坏此不干涉模板 grunt 任务的目的？

我注册了一个索引任务（使用通配符来源）：

index: {
        dev: {
            dir: '<%= wwwroot_dir %>',
            src: [
               '<%= build_dir %>/wwwroot/**/*.js',
            ]

然后我有一个多任务：

grunt.registerMultiTask('index', 'Process index.html template', function () {
    var dirRE = new RegExp('^(' + grunt.config('build_dir') + '/' + grunt.config('wwwroot_dir')
                                + '|' + grunt.config('compile_dir') + '/' + grunt.config('wwwroot_dir')
                                + '|' + grunt.config('build_dir')
                                + '|' + grunt.config('compile_dir')
                                + ')\/', 'g');

    var jsFiles = filterForJS(this.filesSrc).map(function (file) {
        return file.replace(dirRE, '');
    });

    var cssFiles = filterForCSS(this.filesSrc).map(function (file) {
        return file.replace(dirRE, '');
    });

    var sourcePath = userConfig.app_files.htmltemplate;

    grunt.file.copy(sourcePath, this.data.dir + '/index.html', {
        process: function (contents, path) {
            return grunt.template.process(contents, {
                data: {
                    scripts: jsFiles,
                    styles: cssFiles,
                    version: grunt.config('pkg.version')
                }
            });
        }
    });
});

示例index.html

    <html data-ng-app="app" data-ng-controller="AppCtrl" ng-init="">
    <head>
      <title data-ng-bind="pageTitle">MY APP</title>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

      <!-- compiled CSS --><% styles.forEach( function ( file ) { %>
      <link rel="stylesheet" type="text/css" href="<%= file %>" />
      <% }); %>

      <!-- compiled JavaScript --><% scripts.forEach( function ( file ) { %>
      <script type="text/javascript" src="<%= file %>"></script>
      <% }); %>
   </head>
   <body>
      <div data-ui-view></div>
   </body>
    </html>

定义的示例目录（如果可能，我想避免）：

index: {
        dev: {
            dir: '<%= wwwroot_dir %>',
            src: [
                  '<%= wwwroot_dir %>/lib/angular/*.js',
                  '<%= wwwroot_dir %>/lib/angular-bootstrap/*.js',
                  ....etc
            ]

Answer 1

经过一番搜索，我在 gruntjs.com

上找到了以下内容

Also, in order to simplify otherwise complicated globbing patterns, Grunt allows arrays of file paths or globbing patterns to be specified. Patterns are processed in-order, with !-prefixed matches excluding matched files from the result set. The result set is uniqued.

由于文件是唯一的，我在顶部包含了更重要的依赖项，然后使用通配符。唯一性似乎已经删除了第二个实例而不是第一个有效的实例。

index: {
        dev: {
            dir: '<%= wwwroot_dir %>',
            src: [
                '<%= wwwroot_dir %>/lib/jquery/dist/*.js',
                '<%= wwwroot_dir %>/lib/angular/*.js',
               '<%= wwwroot_dir %>/lib/**/*.js',
            ]
        }

Grunt 索引任务 src 通配顺序

Grunt index task src globbing order

npm

angularjs

gruntjs

visual-studio-2015