Conditionally Load Bower Packages

Greetings!

I’m completely new to Sage, but I’m very interested in figuring this all out so I can get going. I like the idea of bower/gupl/etc. but often find myself wondering if it’s really worth all the added complexity.

Anyway! As I’m looking through this, it looks like if I added a bower package via bower install --save packagename it will not only add the package, but automatically enqueue it as well. While that’s nifty, I could quickly see myself loading a ton of unused javascript, as I won’t necessarily use every package on every endpoint. I’m sure I’m not understanding the full capability of all this configuration, though.

So here’s my question: Is it possible, and if so how, to enqueue only specific packages conditionally?

Thanks!

Happily, I can answer my own question. :smile:

The trick of the whole thing lies in the magic of the manifest.json file. The reason that all bower files are loaded without any effort is that the line in the manifest file, "main": true tells the gulp automation to load all unclaimed bower assets into that file. In this case they’re put in main.js, and this file is enqueued on line 76 of of assets.php.

But! If, in the manifest.json file, you specify where a bower packages assets are to go (such as the jquery lines), then instead the assets are loaded into the specified file name. This new file is not automatically enqueued. That being the case, you have full control over when to load it. Bam.

I like this the more I tinker with it!

1 Like

Yes, much :heartpulse: to @austin and the magical asset-builder. I love how flexible the whole workflow is.