Search code examples
javascriptnode.jstwitter-bootstrapgruntjsgruntfile

Bootstrap usage in the gruntfile

I'm currently developing a web-app using node/npm and grunt. I'm new to web-development and come from java development. This is how my prototype's structure looks like:

prototype
|--app
   |--index.html
   |--index.js
|--dist
   |--index.html
   |--index.js
|--lib (currently empty)
|--Gruntfile.js
|--package.json

I plan on developing with following structure: My code will be modularized by using npm modules in the lib folder. Those will be included in the index.js. The index.html and index.js files in the app folder will be built for the browser using grunt-browserify and grunt-contrib-copy; results will be put into the dist folder. I also plan on using bootstrap.

In the bootstrap starting-guide, there is written (source), grunt dist would regenerate the dist folder with bootstrap included.

My first question is: How does that happen? I guess you have to place the bootstrap folders somewhere. Or do I need to install some bootstrap related package? In short: How does grunt "know about" bootstrap?

My second question is: How could I include this process in my gruntfile? Right now my gruntfile uses browserify to browserify the index.js and copy to copy the index.html. Those are registered at the goal (is this the right term?) default: grunt.registerTask('default', ['browserify', 'copy', ]);. I'd like to alter this goal by adding the bootstrap magic that happens in grunt dist.

Any help is much appreciated!

Solution

  • The target you are referring to is in bootstraps build environment. You can download this with npm install bootstrap@3 The grunt dist target they are referring too is contained in the downloaded node_modules\bootstrap\Gruntfile.js and is used to compile bootstrap itself for distribution.

     grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js']);

    The dist target uses several grunt modules like grunt-contrib-htmlmin and grunt-contrib-cssmin and not all may be desired in your setup. I would suggest taking a look at this file and each of the targets called and modules used for some more guidance on how to proceed.

    If you just want to use bootstrap in your project you can download the already compiled and minified libary here and just add them to your project.