javascripthtmlconfiguration-filesbrunchmultipleoutputs

Is there a way to set smart/dynamic 'joinTo' output-files in Brunch?


First, I'll post an example how I "think" it may be defined in a Brunch configuration file:

files:
    javascripts:
        joinTo:
             # $1 = first sub-match in RegExp
            'app_$1.js' : /^app_([a-z0-9]*)/
            'vendor.js' : /^vendor/

Essentially I'm trying to figure out a way to have multiple outputs based on the name of each "app_??????" folders the Javascript files are stored in.

So if you have this folder structure, you would get the following output:

brunch_project/
    app_300x250/
        other.js
        app.js
        index.html
    app_728x90/
        other.js
        app.js
        index.html

    public/
        app_300x250.js
        app_300x250.html
        app_728x90.js
        app_728x90.html
        vendor.js

Note:
True, I didn't show in the configuration how the HTML would get renamed/merged the same as the JS files, but that's how I'd like it to work ideally. Bonus high-fives for anyone who shows me how it's done!


Solution

  • If you have only two variants, i'd suggest to just add files like app_728x90.html inside assets/ directories. Then, create subfolders with resolutions inside app/. And use it in regexps.

    If you need more than two variants, you can use JavaScript / CoffeeScript code to generate the joinTo clause like that:

    joinTo = {}
    for res in resolutions
      joinTo[res] = ///^app\/#{res}///
    
    exports.config = files: javascripts: joinTo: joinTo