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

1 Views

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:

Read More
"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:EasyPHPwwwpotwp-contentthemespotbower_componentsbootstrap-sassassetsjavascriptsbootstraptransition.js',
       'D:EasyPHPwwwpotwp-contentthemespotbower_componentsbootstrap-sassassetsjavascriptsbootstrapalert.js',
       'D:EasyPHPwwwpotwp-contentthemespotbower_componentsbootstrap-sassassetsjavascriptsbootstrapbutton.js',
       'D:EasyPHPwwwpotwp-contentthemespotbower_componentsbootstrap-sassassetsjavascriptsbootstrapcarousel.js',
       'D:EasyPHPwwwpotwp-contentthemespotbower_componentsbootstrap-sassassetsjavascriptsbootstrapcollapse.js',
       'D:EasyPHPwwwpotwp-contentthemespotbower_componentsbootstrap-sassassetsjavascriptsbootstrapdropdown.js',
       'D:EasyPHPwwwpotwp-contentthemespotbower_componentsbootstrap-sassassetsjavascriptsbootstrapmodal.js',
       'D:EasyPHPwwwpotwp-contentthemespotbower_componentsbootstrap-sassassetsjavascriptsbootstraptooltip.js',
       'D:EasyPHPwwwpotwp-contentthemespotbower_componentsbootstrap-sassassetsjavascriptsbootstrappopover.js',
       'D:EasyPHPwwwpotwp-contentthemespotbower_componentsbootstrap-sassassetsjavascriptsbootstrapscrollspy.js',
       'D:EasyPHPwwwpotwp-contentthemespotbower_componentsbootstrap-sassassetsjavascriptsbootstraptab.js',
       'D:EasyPHPwwwpotwp-contentthemespotbower_componentsbootstrap-sassassetsjavascriptsbootstrapaffix.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:EasyPHPwwwpotwp-contentthemespotbower_componentsjquerydistjquery.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/.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. 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.