如何将目录中自动生成的文件列表添加到JS文件中？

Question

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'];

Answer 1

ng-boilerplate does something like it.

It uses a template for script and stylesheets

<!-- 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><% }); %>

And then a custom grunt task to process template according to files

return grunt.template.process( contents, {
  data: {
    scripts: jsFiles,
    styles: cssFiles,
    version: grunt.config( 'pkg.version' )
  }
});

ng-boilerplate files are listed through a config file, but you could also use a Globbing pattern or even grunt.file API

Answer 2

You absolutely can do this. It's not really that difficult, but you will need a custom task and to use the Node FileSystem API . Try something like this:

grunt.registerTask("filelist", "Lists files in a directory as JSON string to file", function() {
    var list,
        done = this.async(),
        filename = grunt.config("filelist.images.filename"),
        directory = grunt.config("filelist.images.directory");

    list = fs.readdirSync(directory);

    fs.writeFile(filename, JSON.stringify(list), function (err) {
        if (err) { throw err; }
        grunt.log.writeln("file list from " + directory + " saved to " + filename);
        done();
    });

});

In your config section, place this:

filelist: {
    images: {
        filename: "image.json",
        directory: "images"
    }
}

And at the top of your file place this:

var fs = require("fs");

And call it like so:

grunt filelist:images

Answer 3

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! :)