Making sure vendor JS is called before custom JS (WordPress Sage)

Question

I can't find how to make vendor scripts load before my own scripts. In manifest.json I tried:

"dependencies": {
  "main.js": {
    "files": [
      "scripts/vendor_script.js",
      "scripts/custom_script.js"
    ],
    "main": true
  },

Doesn't work: vendor script is called after my custom script. Also tried:

"dependencies": {
  "plugins.js": {
    "files": [
    "scripts/vendor/owl.carousel.min.js"
    ]
  },
  "main.js": {
    "files": [
      "scripts/main.js"
    ],
    "main": true
  },

Same. Any suggestion?

[EDIT] my current manifest.json file, where I followed the advice from https://discourse.roots.io/t/custom-javascript-in-manifest-json-and-building-out-into-a-single-file/3316:

{
  "dependencies": {
    "main.js": {
       "vendor": [
        "scripts/vendor/owl.carousel.min.js"
      ],  
      "files": [        
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss",
        "styles/vendor/font-awesome.min.css",
        "styles/vendor/owl.carousel.min.css"        
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    }
  },
  "config": {
    "devUrl": "http://127.0.0.1/pot/"
  }
}

[EDIT #2]

$ node
> require('asset-builder')('./assets/manifest.json').globs.js
require('asset-builder')('./assets/manifest.json').globs.js
[ { type: 'js',
    name: 'main.js',
    globs:
     [ 'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\transition.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\alert.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\button.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\carousel.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\collapse.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\dropdown.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\modal.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\tooltip.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\popover.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\scrollspy.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\tab.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\affix.js',
       'scripts/vendor/owl.carousel.min.js',
       'assets/scripts/main.js' ] },
  { type: 'js',
    name: 'customizer.js',
    globs: [ 'assets/scripts/customizer.js' ] },
  { type: 'js',
    name: 'jquery.js',
    globs: [ 'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\jquery\\dist\\jquery.js' ] } ]

The script I'm trying to use is Owl Carousel. If I add the following in head.php it works fine:

<script src="<?php bloginfo("template_url"); ?>/assets/scripts/vendor/owl.carousel.min.js" type="text/javascript" charset="utf-8"></script>

If, instead, I set my manifest.json as shown previously I get a ".owlCarousel is not a function" in Firebug and my slider doesn't work.

Note: I didn't use Bowel, it's not mandatory in regular Sage workflow right? I just copied owl.carousel.min.js into assets/scripts/vendor/.

Correct, Bower isn't mandatory. See my comment: http://stackoverflow.com/questions/37883023/making-sure-vendor-js-is-called-before-custom-js-wordpress-sage/38193448?noredirect=1#comment63845983_37914131 which addressed the problem you're experiencing and should enable you to solve it. You may experience JSHint issues with a script that's already minified so I recommend you include the unminified version. You know Bootstrap already comes with its own carousel too, right? It's relatively basic but depending on your needs it could get the job done: http://getbootstrap.com/javascript/#carousel — cfx, Jul 10 '16 at 02:11
The `globs` array is showing you which files are being concatenated into the file listed above it (`main.js`) _and_ the order they're being included. So the order looks good to me and you can see that gulp is looking for the Owl Carousel script in the dir `scripts/vendor/owl.carousel.min.js` relative to your theme because that's where you told it to look in your `manifest.json` file. It seems like you probably need to change `manifest.json` to _accurately_ reflect where the carousel script is actually located in your themes dir structure. — cfx, Aug 10 '16 at 03:17

cfx · Answer 1 · 2016-12-22T01:25:20.760

On a fresh Sage 8 installation I was able to quickly install OwlCarousel using Bower, exactly as described in the Sage documentation without any issue; its script and styles were both correctly included before project scripts and styles.

Font Awesome requires a Bower override because its default Bower main property instructs Bower to use a LESS and a SCSS file; once I set it to just use SCSS it worked fine. Sage 8 ships with a working set of Bower overrides which you should use as an example. See here.

Something else is going wrong with your scripts or your asset builder setup if you're unable to manually add scripts in the correct order. I suspect your asset paths may be incorrect. The best way to troubleshoot and ensure your manifest points to the correct asset paths is to start an interactive node session in a new terminal window.

First run (in your theme dir):

node

Then run (also in your theme dir):

require('asset-builder')('./assets/manifest.json').globs.js

or (still in your theme dir):

require('asset-builder')('./assets/manifest.json').globs.css

The output will display both the assets' paths and the order they're being included.

If you modify manifest.json while running the gulp watch task it may be necessary to halt the task, run a default gulp build, and then restart your gulp watch task.

If you still have difficulty after viewing the asset-builder output using the steps above then please post (either here or on the Roots forum) the output here along with the installation steps you took when installing the vendor scripts and custom scripts you're attempting to use so that someone can attempt to recreate your environment.

Thanks @cfx. I edited with the output of the command you mentioned. I don't understand why there are double slashes everywhere nor the overall logic of this output unfortunately.. — drake035, Jul 09 '16 at 20:28

Making sure vendor JS is called before custom JS (WordPress Sage)

1 Answers1