Creating a custom dependency block

64 Views Asked by Stefano At 10 April 2025 at 19:17

I'm currently trying to load in multiple JS dependencies into a page. As per best practice etc I'm loading in my JS at the bottom of the page, but I have a particular JS file that I need to load in the head.

How would I go about making a block that only loads in this particular dependency in the <head> but the other JS files carry on loading in the bottom of the page?

Original Q&A

There are 1 best solutions below

Ahmad Alfy On 27 August 2015 at 15:01

This particular case happens in Yoeman's webapp generator where it loads Modernizr in the head and the rest of the scripts near the bottom. If you problem is that the dependency you are facing is being injected at the bottom then you have to exclude it using the following:

wiredep: {
  app: {
    ....
    exclude: [
      'bower_components/path-to-the-file-you-dont-want-wiredep-to-inject'
    ],
  }
}

And in your head add the following:

  <!-- build:js scripts/vendor/custom-script.js -->
  <script src="bower_components/path-to-the-file-you-dont-want-wiredep-to-inject"></script>
  <!-- endbuild -->

Creating a custom dependency block

There are 1 best solutions below

Related Questions in GRUNTJS

Related Questions in BOWER

Related Questions in GRUNT-WIREDEP

Trending Questions

Popular # Hahtags

Popular Questions