# Best practice when overriding main files of bower sub-dependencies **URL:** https://discourse.roots.io/t/best-practice-when-overriding-main-files-of-bower-sub-dependencies/3590 **Category:** sage **Tags:** gulp **Created:** 2015-04-23T17:20:45Z **Posts:** 14 ## Post 1 by @jodi — 2015-04-23T17:20:46Z tldr; I’m asking about best practices when installing a bower dependency which brings along it’s own dependencies. * * * I’ve come across a bit of a problem with the Javascript bower/gulp workflow. In my example, I installed Isotope via `bower install isotope --save`. Now, Isotope’s bower.json has it’s main attribute set like so: `"main": "js/isotope.js"` , which is not actually the packaged version. That’s easy enough to override in my main bower.json: ``` "overrides": { "isotope": { "main": ["./dist/isotope.pkgd.min.js"] } } ``` The problem is that Isotope brings along a whole bunch of it’s own dependencies. In my case it is: ``` "dependencies": { "get-size": "~1.2.2", "matches-selector": ">=1 <2", "outlayer": "~1.4.0", "masonry": "~3.3.0", "fizzy-ui-utils": "~1.0.1" }, ``` These all get installed by `npm`, and all have `main` files defined. So bower-main-files gets them all, gulp concatenates and minifies them all, and I get a giant Javascript file which doesn’t work at all. Now, I’ve overridden them all specifically, which seems to work: ``` "overrides": { "isotope": { "main": ["./dist/isotope.pkgd.min.js"] }, "get-size": { "ignore": true }, "matches-selector": { "ignore": true }, "outlayer": { "ignore": true }, "masonry": { "ignore": true }, "fizzy-ui-utils": { "ignore": true }, } ``` However, this feels fragile and rather arbitrary. I’m sure Isotope isn’t the only useful Bower package to bring along it’s dependencies in this way. Is there a better way of handling these instances? --- ## Post 2 by @austin — 2015-04-23T19:27:15Z Could probably do ``` "overrides": { "isotope": { "main": ["./dist/isotope.pkgd.min.js"], "dependencies": {} } } ``` Will look into this later --- ## Post 3 by @kalenjohnson — 2015-04-23T19:45:09Z I like this simplicity --- ## Post 4 by @jodi — 2015-04-23T19:59:46Z @austin You can absolutely do that. I just tried and it worked perfectly. Thank you, that’s probably the simplest, most readable and best solution. --- ## Post 5 by @austin — 2015-04-23T20:15:08Z isotope’s bower package looks like it is not configured properly. Asset-builder and the gulpfile handle child dependencies just fine, but the way isotope is set up is weird. For instance jQuery is a devDependency. That makes no sense. The fix I suggested above makes sense though. You are essentially saying “no prefer to use the packaged version which has no dependencies”. Prolly still fix isotope’s upstream though. --- ## Post 6 by @jodi — 2015-04-23T21:22:50Z Seems like the author’s philosophically opposed to using bower.json’s `main` in the way that Sage does.[1] I’ll make the request, but I think this may be a matter of opinion. [1] [https://github.com/metafizzy/isotope/issues/879](https://github.com/metafizzy/isotope/issues/879) --- ## Post 7 by @kalenjohnson — 2015-04-23T21:57:12Z It seems like that thread does have an answer though. If you want to use `isotope` as is without overrides, the one missing part is jquery-bridget, which is used for jQuery integration. `bower install --save jquery-bridget` and make sure that bridget is being included before isotope, and it should technically work. TBH though, the end goal is `isotope.pkgd.min.js` anyways, so I would also probably just include that file and exclude all deps as austin showed earlier. --- ## Post 8 by @dangelion — 2015-08-01T17:38:57Z I’m having the same problem as the guy in first post. When I launch `bower install` it downloads a lot of dependencies but I don’t need them because I load the packaged version (isotope.pkgd.js). Adding the `"dependencies": {}` like said by @austin , the error gone but **how can avoid to download all the dependencies?** This is my bower.json ``` { "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word " ], "license": "MIT", "private": true, "dependencies": { "modernizr": "2.8.2", "bootstrap-sass-official": "3.3.5", "isotope": "~2.2.1" }, "overrides": { "modernizr": { "main": "./modernizr.js" }, "bootstrap-sass-official": { "main": [ "./assets/stylesheets/bootstrap/_variables.scss", "./assets/stylesheets/bootstrap/_mixins.scss", "./assets/stylesheets/bootstrap/_normalize.scss", "./assets/stylesheets/bootstrap/_type.scss", "./assets/stylesheets/bootstrap/_grid.scss", "./assets/stylesheets/bootstrap/_responsive-utilities.scss", "./assets/stylesheets/bootstrap/_tooltip.scss", "./assets/javascripts/bootstrap/transition.js", "./assets/javascripts/bootstrap/alert.js", "./assets/javascripts/bootstrap/button.js", "./assets/javascripts/bootstrap/carousel.js", "./assets/javascripts/bootstrap/collapse.js", "./assets/javascripts/bootstrap/dropdown.js", "./assets/javascripts/bootstrap/modal.js", "./assets/javascripts/bootstrap/tooltip.js", "./assets/javascripts/bootstrap/popover.js", "./assets/javascripts/bootstrap/scrollspy.js", "./assets/javascripts/bootstrap/tab.js", "./assets/javascripts/bootstrap/affix.js", "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot", "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg", "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf", "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff", "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2" ] }, "isotope": { "main": [ "./dist/isotope.pkgd.js" ], "dependencies": {} } } } ``` --- ## Post 9 by @kalenjohnson — 2015-08-01T19:50:25Z > [@](#): > > Adding the “dependencies”: {} like said by @austin , the error gone but how can avoid to download all the dependencies? Just curious why downloading the dependencies is an issue for you --- ## Post 10 by @dangelion — 2015-08-01T23:02:38Z Who said that’s a real issue? I prefer to not download MBs of unuseful dependencies, and asking for avoid it… --- ## Post 11 by @ben — 2015-08-03T02:17:35Z What have you tried so far? Have you looked on Bower docs or repos to figure out how to accomplish what you’re wanting? This isn’t really a Sage question --- ## Post 12 by @NeXTs — 2015-10-02T22:07:15Z Thanks jodi, I also faced this problem and you saved me. --- ## Post 13 by @Und3Rdo9 — 2016-03-13T17:51:36Z Also encountered this problem (with flickity plugin specifically) and I couldn’t find the answer in the e-book. Could be a good idea to add this in a future edition. Thanks for the solution, it seems to work for me as well. --- ## Post 14 by @jsonberry — 2016-08-10T06:27:24Z I just stumbled in from the interwebs I came across @austin’s answer a year after he posted it here, and it’s so far the best answer I’ve seen to this workflow problem. For example, here’s a bit out of my bower.json file: > ``` > "jquery": "^3.1.0", > "flickity": "^2.0.2", > "masonry": "^4.1.0" > }, > "overrides" : { > "masonry" : { > "main" : ["dist/masonry.pkgd.js"], > "dependencies" : {} > }, > "jquery" : { > "main" : ["dist/jquery.min.js"], > "dependencies" : {} > }, > "flickity" : { > "main" : ["dist/flickity.pkgd.js", "dist/flickity.min.css"], > "dependencies" : {} > }``` > ``` … and then in my `gulpfile.js`… > ``` > const bower = require('main-bower-files'); > ``` > ``` > gulp.task('bowerCSS', ['jekyllBuild'], function () { > return gulp.src(bower('**/*.css')) > .pipe(concat('vendor.min.css')) > .pipe(postcss(processors)) > .pipe(gulp.dest('dist/resources/styles')); > }); > ``` > ``` > gulp.task('bowerJS', ['jekyllBuild'], function () { > return gulp.src(bower('**/*.js')) > .pipe(concat('vendor.min.js')) > .pipe(uglify()) > .pipe(gulp.dest('dist/resources/scripts')); > }); > ``` > ``` > gulp.task('bowerBuild', ['bowerJS', 'bowerCSS']); > ``` # Before … ![](https://discourse.roots.io/uploads/default/original/2X/2/2195a4d70164bb1c6d766c37b602d37c6679d76c.png) # After ![](https://discourse.roots.io/uploads/default/original/2X/d/d17df6d59eb9be0b98935604ed1d7074e879a5e9.png) Thanks all! Also - I’ve now just discovered the WP tools @ [roots.io](http://roots.io) and I’m pretty stoked to check them out. :smiley: