How to include only certain parts of Bootstrap UI using Grunt
I am using accordion, tooltips and UI Bootstrap transition components .
I can create a custom assembly using an online tool on the Bootstrap UI website that will create a mini and unminified JS file containing only the components I have selected, no overhead.
However, I don't want to use an online tool to compile my custom UT version of Bootstrap, instead I want to copy my own version locally, preferably using the tools I already use; Bower, Grunt and NPM.
So my question is, how can I create my own UT version of Bootstrap locally?
bower install angular-ui-bootstrap
and then the call Grunt build
to bower_components/angular-ui-bootstrap
creates a UI bootstrap assembly that includes all modules, there is probably a way to do the same with only a subset of modules, but I couldn't figure it out.
source to share
This can be done using the following command
grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN
For example, if you wanted an assembly to contain only tabs and buttons , the grunt command would look like
grunt build:tabs:buttons
The generated files will be present in the folder dist
For a list of module names, check all the folder names in the folder src
The documentation for this is sparse, but if you check Gruntfile.js where they register the build task, they mention how to selectively build modules
source to share
It's not as easy as I expected (and how it should be).
Take a look at the Gruntfile.js of the project. You will see that they do quite a lot. Convert HTML and CSS to JS, combine all scripts so that they can be loaded by others. Also, the file is quite difficult to navigate; it even includes custom tasks.
To mimic its behavior, I suggest the following: Download it via Bower as usual. Copy its dependencies node to your dependencies package.json
. Then copy Gruntfile.js
, change its routes, and try deleting some parts of the code until you reach a point where you can't delete more lines without breaking them. This is not a very good way, but it should be successful.
If you've had a lot of time, building your script is a good candidate for deep refactoring. Moving custom tasks to standalone files (or projects), documenting the flow, and possibly doing common tasks for some steps (like minifying CSS).
source to share