如何从多个文件添加到数据数组？

Question

我的文件夹结构如下所示：

.
├── Gruntfile.js
└── src
    └── assets
        └── blocks
          └── content.js
          └── buttons
              └── buttons1.js
              └── buttons2.js
          └── images
              └── images.js

在我的 content.js 文件中有一个空数组：

var data = {
    'snippets': []
};

在每个文件中，即 buttons1.js buttons2.js 和 images.js 都有一个数组，例如：

var snippet = [
    {
        'thumbnail': 'preview/button-01.png',
        'category': '119',
        'html':
            '<div>' +
            '<a href="#" class="is-btn is-btn-ghost2 is-upper">Read More</a> &nbsp;' +
            '\n<a href="#" class="is-btn is-btn-ghost1 is-upper">Buy Now</a>' +
            '</div>'
    }
]

有没有办法让 Grunt（或任何其他进程运行器）循环遍历文件夹中的所有 .js 文件并读取片段数组的值，然后将其添加到 content.js 文件?

所以我最终会得到一个看起来像这样的数组（加上附加的其他文件中的任何其他内容）

var data = {
    'snippets': [
 {
        'thumbnail': 'preview/button-01.png',
        'category': '119',
        'html':
            '<div>' +
            '<a href="#" class="is-btn is-btn-ghost2 is-upper">Read More</a> &nbsp;' +
            '\n<a href="#" class="is-btn is-btn-ghost1 is-upper">Buy Now</a>' +
            '</div>'
    }

]
};

我尝试了 grunt-contrib-concat 使用以下配置，它只是创建一个包含多个代码片段变量的文件，不确定是否有办法修改它的连接方式？或者如果有不同的插件可用

    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: 'src/assets/blocks/*/*.js',
        dest: 'src/assets/blocks/content.js',
      },
    },

Answer 1

In HTML（添加路径）：

<script src="content.js"></script>  // we get data == { 'snippets': [] }

<script src="buttons1.js"></script> // we get snippet == [...]
<script>data.snippets.push(snippet);</script>

<script src="buttons2.js"></script> // we get snippet == [...]
<script>data.snippets.push(snippet);</script>

<script src="buttons3.js"></script> // we get snippet == [...]
<script>data.snippets.push(snippet);</script>

// we have each snippet in snippets

基本上，我们加载容器（data），然后我们一个一个地加载buttons，将它们的snippet添加到data的[=16] =].

附录：动态添加脚本如何？

dataScript=document.body.createElement("script");
dataScript.src="content.js";
document.body.append(dataScript);

buttonSrcs=["buttons1.js", "buttons2.js", "buttons3.js"]; // etc...
for(buttonSrc of buttonSrcs) {
  buttonScript=document.body.createElement("script");
  buttonScript.src=buttonSrc;
  document.body.append(buttonScript);
  data.snippets.push(snippet);
};

我凭记忆打字，希望我拼写正确...

Answer 2

我最终为 Grunt 编写了一个自定义任务，它完成了我想要的事情

    merge_blocks: {
      build: {
        src: 'src/assets/blocks/*/*.js',
        dest: 'src/assets/blocks/content.js'
      }
    }


  grunt.registerMultiTask('merge_blocks', 'Merge blocks', function () {
    const fs = require('fs');
    grunt.log.write('[Block Merge] Loaded dependencies...').ok();

    // This is the main array
    var data_basic = {
      'snippets': []
    };

    this.files.forEach(function (file) {
      grunt.log.writeln('Processing ' + file.src.length + ' files.');

      //file.src is the list of all matching file names.
      file.src.forEach(function (f) {
        var data = require('./' + f);
        data_basic.snippets.push(...data);
        data = null;
      });

      grunt.log.writeln('Now saving file:' + file.dest);
      fs.appendFileSync(file.dest, 'var data_basic = ' + JSON.stringify(data_basic, null, '  '));

    });
  });

如何从多个文件添加到数据数组？

How can I add to a data array from multiple files?

javascript

gruntjs

grunt-contrib-concat