I need some help setting up my Bootstrap project with Grunt. I’ve developed for Bootstrap by downloading compiled and minified source code, but now would like to take things further and learn more about how Bootstrap is constructed itself. Also, I’d like to modularize my working directory so I can keep my code cleaner and logically separated.
The thing is that I don’t know how I’d go about doing it via Grunt. Official instructions are pretty brief and not all of my questions are answered so what I’d like to know is: How would I go about initializing a Bootstrap project and where am I supposed to put a ‘index.html’ file?
If you want to go into the source code, either download the, well, source code, or install it with npm. To set up a new project, this would be (in your project directory):
npm init
npm install bootstrap --save-dev
Bootstrap will now reside in ./node_modules/bootstrap (in your project directory). Now if you want to modify bootstrap, you’ll need the grunt cli; if you haven’t installed it already, do so globally with
npm install -g grunt-cli
You can now start modifying bootstrap to your needs. To (re-)compile it so that you can use it in your project, run
grunt dist
in that bootstrap directory – it already comes with its Gruntfile.js. Then you can use your modified bootstrap just as usual.
This doesn’t matter. You might want to set up a deployment script to concat the minified components you need in your src directory or something, but this is entirely up to you!
