如何将自动生成的目录中的文件列表添加到JS文件中？ [英] How do I add auto-generated list of files in a directory to a JS file?

问题描述

我正在用HTML5编写一个在线游戏。其中一个文件包含全部位于 resources / img / 文件夹中的资源列表。现在，我希望根据此文件夹的内容自动生成此列表，而不是每次添加新图像时手动更新它。我很确定Grunt可以做到这一点，但我不知道如何正确配置它。我应该怎么做Grunt生成这样的事情？

  resources = ['a.jpg'，'b.png' ，'subfolder / c.png']; 
  

解决方案

我做了类似于jakerella建议的事情，决定使用通配模式（如Florian F.所建议的）。我添加了一个新的Grunt任务：

  var fs = require（fs）; 
 grunt.registerTask（filelist，列出目录中的文件为JSON字符串到文件，function（）{
 var list，
 done = this.async（），
 output = grunt.config（filelist.images.output），
 outputVariable = grunt.config（filelist.images.outputVariable），
 patterns = grunt.config（filelist.images .patterns），
 headerComment ='/ *这个文件是使用Grunt任务`filelist`自动生成的。* / \'; 
 
 list = grunt.file.expand（模式）; 
 
 fs.writeFile（output，
 headerComment + outputVariable +'='+ JSON.stringify（list）+';'，
 function（err）{
 if（err）{
 throw err; 
} 
 grunt.log.writeln（保存到+ output的+ list.length +文件列表; 
 done（）; 
}）; 
}）; 
  

我将它添加到我的配置中：

  filelist：{
 images：{
 output：app / generated / image-list.js，
 outputVariable：game.imageList ，
 patterns：[app / resources / img / ** / *]，
}，
}，
  

通过这种方式，我可以将数据包含在< script> 标记中，就像任何其他JS一样。谢谢你们，伙计们！ ：）

I'm writing an online game in HTML5. One of the files contains a list of resources which are all in resources/img/ folder. Now I'd like this list to be automatically generated based on contents of this folder, rather than having to update it manually every time I add a new image. I'm pretty sure that Grunt can do this, but I don't know how to configure it properly. What should I do to have Grunt generate something like this?

resources = ['a.jpg', 'b.png', 'subfolder/c.png'];

解决方案

I did something similar to what jakerella suggested, but I decided to use globbing patterns (as suggested by Florian F.). I added a new Grunt task:

var fs = require("fs");
grunt.registerTask("filelist", "Lists files in a directory as JSON string to file", function() {
    var list,
        done = this.async(),
        output = grunt.config("filelist.images.output"),
        outputVariable = grunt.config("filelist.images.outputVariable"),
        patterns = grunt.config("filelist.images.patterns"),
        headerComment = '/* This file was auto-generated using Grunt task `filelist`. */\n';

    list = grunt.file.expand(patterns);

    fs.writeFile(output,
        headerComment + outputVariable + ' = ' + JSON.stringify(list) + ';',
        function (err) {
            if (err) {
                throw err;
            }
            grunt.log.writeln("List of " + list.length + " files saved to " + output);
            done();
        });
});

And I added this to my config:

    filelist: {
        images: {
            output: "app/generated/image-list.js",
            outputVariable: "game.imageList",
            patterns: ["app/resources/img/**/*"],
        },
    },

This way I can include the data with a <script> tag, just like any other JS. Thank you both, guys! :)

这篇关于如何将自动生成的目录中的文件列表添加到JS文件中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！