Bootstrap is a fine library with lots of goodies but I don’t want to recklessly install the full library. There are many pieces of code not necessary for what I’m building.
In the latest version of bower.json file, on lines 19-36, I think it’d be great to delete the extra CSS, JS and font files so they won’t download into bower_components/bootstrap-sass-official.
For example, after deleting everything but one line of javascript that I want, I run bower install, then view bower_components/bootstrap-sass-official folder and still see everything downloaded. Nothing appears to have changed.
A responsible developer wouldn’t allow a complete library to always go in every project since it’s likely that half the code is never used or referenced. I do like that Bootstrap has its own Customize page but I cannot find a way to do something similar using Bower in the current setup.
Any tips on figuring this out or is it going to be completely manual on my part?
So if you delete everything but one line and then check the compiled output of main.js you will see that the entire contents of bootstrap is excluded except for that one file.
Bower always “installs” every project’s files. Including src, build, repo websites, etc. That said, not all of those files go into the final main.js and main.css files, and therefore have no effect on the size of your project.
Deleting lines referencing Bootstrap JS from that file will keep those files from being compiled into main.js, as @austin said.
If you’d like to customize what scss files to include I recommend that you copy Bootstrap’s _bootstrap.scss into your own styles and @import that into main.scss (you can remove it from bower.json). Personally, I do this with a good amount of my projects.
To verify, if I save my file like this with just the dropdown menu JS, you’re saying that when I run gulp or gulp --production, main.js’s compiled file will not include the rest of Bootstrap’s JS? That’s what I was hoping would happen but it was confusing why the whole set of files was being downloaded but what you both say makes sense now that I think about it because maybe I want to add another part of Bootstrap’s library into the build so I can just add back those lines.
Is it true that when processing or during build, the build script will reference the project files first for bootstrap styles before it defaults to the bower_components files? I also assume _bootstrap.scss needs to live in the root of the styles directory and the paths in this file need to be redirected to the bower_components/bootstrap-sass-official directory?
EDIT: I’m seeing here that I shouldn’t need to copy the bootstrap file into my assets folder but instead just use the bower.json file to manually add each component I want. Is the list of less or sass files and the order which they appear, according to what Mike Ill is saying in those comments, that important where normalize needs to appear first if I want to use the sass version? What confuses me is the path of these sass and js files is pointing to assets, meaning that’s where these individual files will be copied to during the build process?