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

问题描述

我有一个看起来像这样的文件夹结构：

.
├── 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','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: ';',},@R_502_6422@t: {
        src: 'src/assets/blocks/*/*.js',dest: 'src/assets/blocks/content.js',

解决方法

在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的{{1}}

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

snippets

我是从记忆中打字的，希望我的拼写正确...

我最终为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,'  '));

    });
  });

gruntjs javascript