Gulp rendering order

My main.js should consist of jquery, bootstrap, jasny-bootstrap, angular, ng-infinite-scroll, and then custom functions particular to my site (in this order).

I’m getting everything from the bower_components properly; however, the gulp process always puts my custom functions (./assets/scripts/main.js) first. This causes issues.

How do I control the order these js files are compiled in?

I’ve changed the order in assets/manifest.js to the below.

“main.js”: {
“main”: true,
“files”: [
“scripts/main.js”
]
}

I’m not seeing this behavior:

The order should be

  1. bower
  2. vendor
  3. everything in “files”

Ok, thank you.

It appears these functions are being pulled into the jQuery glob b/c they’re used with jQuery(document).ready(function(){});

Possibly related: https://github.com/roots/sage/pull/1485

I know this is an old issue but I am not sure if it was ever resolved.

I have four custom scripts in /assets/scripts/ and as the OP explained, for me, some of the custom scripts are being inserted before Bower scripts. This is causing issues when I have a dependency either on jQuery or other custom scripts.

Is there a fix that I can apply to make this work? I saw Austin’s pull request for adding gulp-order and path but it wasn’t merged into the Gulpfile. Was that a potential solution to the problem?

EDIT: I can confirm it’s more than just the document ready function with jQuery.

I found a few ways to force any custom scripts below Bower scripts.

  1. IIFE
    (function(){ /* code */ }());
  2. Self-executing anonymous function
    var foo = function() { /* code */ };
  3. document.ready (jQuery)
    $(document).ready(function() { /* code */ });
    $(function() { /* code */ });
  4. window.onload (Javascript)
    window.onload = function() { /* code */ };

I don’t know why but using either of these two methods around the code will force the script load order as Austin wrote it.