Grunt: 从外部YAML文件访问序列列表数据

Question

我试图从我的Gruntfile中的一个外部YAML文件中访问值，使用。

external = grunt.file.readYAML('_config.yml');

使用 _config.yml 文件有以下的例子数据。

computer:
  parts:
    - name: brand1
      type: cpu
    - name: brand2
      type: gpu
    - name: brand3
      type: hd

我一直在尝试访问多层次的YAML数据，使用的是 <%= %> grunt模板来获取不同的名称和类型值。

module.exports = {
  concat: {
    src: ['htdocs/<%= external.computer.parts['type'] %>/<%= external.computer.parts['name'] %>/*.js'],
    dest: 'htdocs/output.js'
  }
};

我的主要目标是用这种方式将不同目录下的文件合并成一个文件，但我似乎无法从 _config.yml 超出 external.computer.parts. 顺便说一下，该结构的 _config.yml 文件必须保持不变。

如何通过这种方式访问不同属性的sequencelist？

Answer 1

下面有几个解决方案可以考虑。不过，首先让我们了解一下使用"_config.yml "是什么。grunt.file.readYAML() 来解析你的 _config.yml 文件的作用。它主要产生以下对象。

{
  computer: {
    parts: [
      {
        name: 'brand1',
        type: 'cpu'
      },
      {
        name: 'brand2',
        type: 'gpu'
      },
      {
        name: 'brand3',
        type: 'hd'
      }
    ]
  }
}

注 价值如何 parts 是一个对象数组。

---

解决方案1:

既然你想利用 灌音模板 (即 <%= %>)以获得不同的 name 和 type 值，考虑配置你的 concat 在你 Gruntfile.js 如下所示。

Gruntfile.js

module.exports = function (grunt) {

  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.initConfig({
    external: grunt.file.readYAML('_config.yml'),

    concat: {
      dist: {
        options: {
          // ...
        },
        src: [
          'htdocs/<%= external.computer.parts[0].type %>/<%= external.computer.parts[0].name %>/*.js',
          'htdocs/<%= external.computer.parts[1].type %>/<%= external.computer.parts[1].name %>/*.js',
          'htdocs/<%= external.computer.parts[2].type %>/<%= external.computer.parts[2].name %>/*.js'
        ],
        dest: 'htdocs/output.js'
      }
    }
    // ...
  });

  grunt.registerTask('default', [ 'concat' ]);

};

注释。

1. 脚本中的 external 对象的属性，传递到 grunt.initConfig 方法本质上是上述对象，也就是说，它是利用了 grunt.file.readYAML() 来解析你的 _config.yml.

2. 价值。src 的财产 dist 目标(它与 concat 任务)，是一个数组。这个数组的每一项都是我们利用 <% ... %> 符号来引用您的 .yml 文件。

   请注意我们如何引用 external.computer.parts 数组的索引，也就是 [0], [1], [2]

   'htdocs/<%= external.computer.parts[0].type %>/<%= external.computer.parts[0].name %>/*.js'
                                       ^                                      ^
   

---

解决办法2:

另一种达到你要求的方法是不使用grunt模板，即： <% ... %>，完全不使用。请考虑以下解决方案。

Gruntfile.js

module.exports = function (grunt) {

  grunt.loadNpmTasks('grunt-contrib-concat');

  var external = grunt.file.readYAML('_config.yml');

  grunt.initConfig({
    concat: {
      dist: {
        options: {
          // ...
        },
        src: external.computer.parts.map(function(part) {
          return 'htdocs/' + part.type + '/' + part.name + '/*.js'
        }),
        dest: 'htdocs/output.js'
      }
    }
    // ...
  });

  grunt.registerTask('default', [ 'concat' ]);

};

注释。

1. 这次，我们将解析你的 _config.yml 文件到一个名为 external:

   var external = grunt.file.readYAML('_config.yml');
   

2. 价值 src 属性的计算方法是利用 map() 方法。在这里，我们创建一个新的数组 球型.

   src: external.computer.parts.map(function(part) {
     return 'htdocs/' + part.type + '/' + part.name + '/*.js'
   }),
   

---

效益。

主要好处之一是： 解决方案2 已超过 解决方案1 是。

如果我们需要添加一个新的部分name 和 tyoe)至 _config.yml. 例如：

computer:
  parts:
    - name: brand1
      type: cpu
    - name: brand2
      type: gpu
    - name: brand3
      type: hd
    - name: brand4      <-------
      type: foo         <-------

随着... 解决方案1 我们需要将其添加到 src 中的配置 Gruntfile.js. 比如说。

src: [
  'htdocs/<%= external.computer.parts[0].type %>/<%= external.computer.parts[0].name %>/*.js',
  'htdocs/<%= external.computer.parts[1].type %>/<%= external.computer.parts[1].name %>/*.js',
  'htdocs/<%= external.computer.parts[2].type %>/<%= external.computer.parts[2].name %>/*.js',

   // Newly added...
  'htdocs/<%= external.computer.parts[3].type %>/<%= external.computer.parts[3].name %>/*.js'
],

用 解决方案2 我们不需要改变 src 中的配置 Gruntfile.js 在所有。

---

编辑。

如果你使用的是node.js的最新版本，那么你也可以重构一下 解决方案2 如下所示。

Gruntfile.js

module.exports = function (grunt) {

  grunt.loadNpmTasks('grunt-contrib-concat');

  const { computer: { parts } } = grunt.file.readYAML('_config.yml');

  grunt.initConfig({
    concat: {
      dist: {
        options: {
          // ...
        },
        src: parts.map(({ type, name }) => `htdocs/${type}/${name}/*.js`),
        dest: 'htdocs/output.js'
      }
    }
    // ...
  });

  grunt.registerTask('default', [ 'concat' ]);

};

_{请忽略StackOverflow无法正确语法高亮上面的例子。}

注释。

这个重构的版本利用了一些ES6的特性，具体如下。

• 对象重构 是用来拆包的 parts 属性值，从解析的 _config.yml变成一个 parts 变量。

  var { computer: { parts } } = grunt.file.readYAML('_config.yml');
  

• 价值： src 属性的计算方法是使用 箭头功能 随着 map() 方法，以及 模板文字 而不是使用加号运算符(+)，用于字符串连接。

  src: parts.map(({ type, name }) => `htdocs/${type}/${name}/*.js`),