Order of bundles in bundle.result.json

[DasJott]

What causes the order in bundle.result.json?
I would love to be able to set the order the bundles appear in the result.
Would that be possible?

[chmontgomery]

Currently, the result order is simply based on the order the bundles leave the stream. One work-around is you could add a custom handler at the end of the stream that does a final reorder:

gulp.task('bundle', function () {
  return gulp.src('./bundle.config.js')
    .pipe(bundle())
    .pipe(bundle.results())
    .pipe(gulp.dest('./public'))
    .pipe(through2(function() {
         // read bundle.result.json, reorder and write back to disk
    });
});

That is not ideal though. This functionality should be handled by this package. By default I would think the order would match the order of bundles as they appear in the bundle.config.js?

[DasJott]

Yes, the order would be intuitive, I think.
Brilliant!

[DasJott]

Any progress on this?
Built a workaround for my project for now, where I use an extra file setting the order.

[chmontgomery]

Sorry no. I'm always willing to accept PRs...

[AndrewCraswell]

Dropped in to see if someone reported this yet. My project requires bundles to be rendered in a particular order, so this would be an ideal enhancement. It would be great if the order would match the order of bundles as they appear in the bundle.config.js.

I don't have time to submit a PR, but I did place a bounty:
https://www.bountysource.com/issues/30603997-order-of-bundles-in-bundle-result-json

[PlasmaPower]

To change the ordering, I'd need to either add an order/weight attribute, or change the order they are coming through the stream. Which would be preferable? I'd think the former.

[chmontgomery]

@PlasmaPower see the thread above. The object key order in bundle.result.json should match the order of the keys in bundle.config.js, e.g.

Given this bundle.config.js:

module.exports = {
  bundle: {
    main: {
      scripts: [
        './content/js/baz.js',
        './content/js/foo.js'
      ],
      styles: './content/**/*.css'
    },
    vendor: {
      scripts: [
        './bower_components/jquery/dist/jquery.js',
        './bower_components/angular/angular.js'
      ],
      styles: [
        './bower_components/bootstrap/dist/css/bootstrap.css',
        './bower_components/bootstrap/dist/css/bootstrap-theme.css'
      ]
    },
    customJs: {
      scripts: './content/js/custom.js'
    }
  }
};

The bundle.result.json should have its results in the order: main, vendor, customJs. E.g.:

{
  "main": {
    "styles": "<link href='main.css' media='all' rel='stylesheet' type='text/css'/>",
    "scripts": "<script src='main.js' type='text/javascript'></script>"
  },
  "vendor": {
    "styles": "<link href='vendor.css' media='all' rel='stylesheet' type='text/css'/>",
    "scripts": "<script src='vendor.js' type='text/javascript'></script>"
  },
  "customJs": {
    "scripts": "<script src='customJs.js' type='text/javascript'></script>"
  }
}

[PlasmaPower]

@chmontgomery Yes I get that, I'm talking about how to accomplish that. When the objects are piped through the stream, the result pipe will put them into the file. However, it doesn't know about the order of them in the config. Therefore, it must receive that information, I would put it in an order attribute for the bundle. Is that good? I could also simply ship the bundles in the correct order, but that could lead to a slow down and might be harder to implement.

[chmontgomery]

@PlasmaPower I think putting the order in an order attribute under the result object makes sense: https://github.com/dowjones/gulp-bundle-assets/blob/master/lib/results/add-bundle-results-to-file.js#L11

The only downside of this approach is that we'll be passing the result order down attached to every file in the stream, but as long as you keep the object small it shouldn't be a problem, e.g.:

{
  order: ['main','vendor','customJs']
}

Once you do that, you can use the order config in these two places:

• https://github.com/dowjones/gulp-bundle-assets/blob/master/lib/results/index.js#L36
• https://github.com/dowjones/gulp-bundle-assets/blob/master/lib/results/index.js#L82

[PlasmaPower]

@chmontgomery Makes sense, I was just planning on storing that specific item's position in the result but your solution will probably be more stable and faster.

[chmontgomery]

this feature has been published into v2.27.0. Please test and let me know how it works!

[DasJott]

Big thanks to you both!
I will try it and report.
So I probably can get rid of the workaround. I made a textfile with the result names in the wanted oder. And my framework just did it then.