Getting bower packages to work

sage
1

I’ve read many similar questions here on this same topic, but I still can’t get bower to play well with the whole development workflow.

I installed headroom.js with bower install --save headroom.js. From what I understood this should be enought to call headroom in my main.js. But I get:

headroom is not defined

I’ve tried adding this to the manifest.json:

"headroom.js": {
      "bower": ["headroom.js"]
    }

this to bower.json:

"headroom.js": {
      "main": "./dist/headroom.js"
    },

I’ve done all that running gulp watch and have tried running gulp --production, but with no luck. The strange thing is that headroom.js shows in the dist/scripts folder.

Am I missing something?

2

Remember that basically everything works off the “main” declaration in a package’s bower.json file. Unfortunately, there are many that are not set up correctly, as those files should be the “entry points” as “main” is described now.

It looks like headroom.js is not quite set up correctly: https://github.com/WickyNilliams/headroom.js/blob/master/bower.json#L4 , it’s pulling in all 3 versions of itself, standard JS, jQuery, and Angular versions.

You will want to set the override in Sage’s bower.json to what you have. This will add it in to main.js. You don’t need to add anything to manifest.json, since if you do that, headroom will NOT be added to main.js, and you would need to enqueue it manually.

Remove that statement from manifest.json, and run gulp again, and it should be compiled in main.js which is what I think you are expecting.

3

Finally got it to work. In the case of headroom.js this was my setup in bower.json:

"headroom.js": {
      "main": [
        "./dist/headroom.min.js",
        "./dist/jQuery.headroom.min.js"
        ]
    }

Really appreciate the quick response. Cheers! :beers:

2 Likes