Question

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

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

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

上找到了以下内容

此外，为了简化其他复杂的globbing模式，Grunt允许文件路径或globbing模式的数组指定。模式按顺序处理，使用！-prefixed匹配从结果集中排除匹配的文件。结果集是 uniqued。

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

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

Grunt索引任务src通配顺序

1 个答案: