CODEWITHSUNDEEP
twitter-bootstrap-3gruntjs
TarDavis
TarDavis

Reputation: 117

How to build Twitter Bootstrap 3 using Grunt

I've cloned Twitter Bootstrap 3 using git clone https://github.com/twbs/bootstrap.git:

Now, I am trying to build it using Grunt and I cannot find any documentation on how to do this.

Where should I start?

Upvotes: 3

Views: 14316

Answers (2)

Alexidze
Alexidze

Reputation: 183

For a basic instruction on how to build using Grunt you can refer to

http://getbootstrap.com/getting-started/

Essentially it's as easy as 

grunt dist

If you are running from the command line in Windows, be sure to run cmd.exe as administrator.

Upvotes: 2

NarendraSoni
NarendraSoni

Reputation: 2258

To add some more automation to your project, I would suggest you is to use Bower. This will even save you the time of downloading everything to your assets.

In order to use Bower you need bower.json

This file looks something like this:

{
    "name": "WebExpressive",
    "version": "0.0.0",
    "authors": [
        "username <[email protected]>"
    ],
    "description": "An awesome web application",
    "license": "MIT",
    "ignore": [],
    "dependencies": {
        "bootstrap": "latest",
        "jQuery": "latest",
        "angular-latest": "latest",
        "turnjs": "latest"
    }
}

Now you to plug your bower to grunt you need to have a Gruntfile.js which will look something like this

module.exports = function (grunt) {
    //project configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        shell: {
            multiple: {
                command: ['bower install',
                    'mv bower_components/** public/',
                    'rm -rf bower_components'].join('&&')
            }
        }
    });

    grunt.loadNpmTasks('grunt-shell');

    //Default Tasks
    grunt.registerTask('default', ['shell']);

    //production Tasks
    //grunt.registerTask('dist',[..]);

    //test tasks
};

Now before you actually run the 'grunt', make sure that you got all npm packages in your project directory and package.json is in correct shape.

Take a look at my package.json file.

{
    "name": "application-name",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "grunt": "*",
        "grunt-shell": "*",
        "grunt-contrib-uglify": "*",
        "grunt-contrib-connect": "*",
        "grunt-contrib-coffee": "*",
        "grunt-contrib-compass": "*",
        "grunt-open": "*",
        "grunt-contrib-requirejs": "*",
        "grunt-contrib-jade": "*",
        "grunt-contrib-copy": "*",
        "grunt-bower-install": "*"
    }
}

Now you just need to run these commands and you can find the your bootstrap inside the public folder.

npm install
grunt

Please do visit grunt and grunt shell to explore more on this, they are just great.

Upvotes: 3

Related Questions