Menu

Use Bootstrap with Bower and Grunt

February 18, 2015 by Christopher Sherman

If you want to use the popular web framework Twitter Bootstrap for your next project, you could simply copy the Bootstrap CSS and JavaScript. But if you’d like to enhance your ability to customize, improve the efficiency of your workflow, and make the project portable, you can instead utilize SASS, Bower, and Grunt to set up Bootstrap. Let’s get to it.

To begin, you’ll need NodeJS installed. Visit the NodeJS website for the download. Be sure to add Node to your PATH variable so it’s accessible on the terminal from any directory.

Next we need to install Bower, a package manager for the web that takes care of downloading and updating the frameworks and libraries our project depends on. At the terminal, run the following command to install Bower:

npm install –g bower

Change the directory of your terminal to the root of your web project. We will now use Bower to install Bootstrap. Run the following commands from the terminal to initialize a bower.json file that will manage our dependencies. Bower will prompt you for a series of details about your project; feel free to respond to these or to accept the defaults by hitting the Return key. The second series of prompts you can accept by typing y or yes.

bower init

We’re now ready to install Bootstrap and save it as a dependency to our bower.json file. I prefer the SASS CSS pre-processor, so we’ll use the SASS Bootstrap project. At the terminal run the following command:

bower install bootstrap-sass --save

By adding the save option, we won’t need to check the bower_components folder into source control. When other developers download our project, they can simply run bower install to download project dependencies.

Remaining in the root directory of our project, run the following command to set up the packages.json file that tracks our Node packages (such as the Grunt plugins we’ll install later). Similar to the bower.json file, this file keeps track of our dependencies so other developers can get up and running easily. Feel free to accept the defaults in the series of prompts.

npm init

We now need to install Grunt, a tool that automates tasks like compiling SASS files when they change or copying JavaScript libraries to more convenient directories. The next command installs the Grunt command line interface (CLI), but not the task runner itself. We will use the Grunt CLI to install Grunt Plugins like the Grunt task runner. I know it’s a bit confusing, but stay with me!

npm install –g grunt-cli

Next, we will install our first Grunt plugin using the Grunt CLI. Install the Grunt task runner plugin with the command below. The --save-dev option tells Node that this is a dependency we only utilize in our development environment.

npm install grunt --save-dev

Now that you’re an expert at installing Grunt plugins, we’ll install a couple more. The first two plugins watch our SASS files for changes and recompile them when changes are detected. The last plugin copies assets such as JavaScript, font, and SASS files out of the bower_components folder into directories that are easier to reference and work with.

npm install grunt-sass --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-copy --save-dev

To finish configuring Grunt, we add a Grunt file that tells Grunt what to do when we start the task runner. Create a file in the root directory named Gruntfile.js. Within this file, add the following configuration:

module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

        // Copy web assets from bower_components to more convenient directories.
        copy: {
            main: {
                files: [
                    // Vendor scripts.
                    {
                        expand: true,
                        cwd: 'bower_components/bootstrap-sass/assets/javascripts/',
                        src: ['**/*.js'],
                        dest: 'scripts/bootstrap-sass/'
                    },
                    {
                        expand: true,
                        cwd: 'bower_components/jquery/dist/',
                        src: ['**/*.js', '**/*.map'],
                        dest: 'scripts/jquery/'
                    },

                    // Fonts.
                    {
                        expand: true,
                        filter: 'isFile',
                        flatten: true,
                        cwd: 'bower_components/',
                        src: ['bootstrap-sass/assets/fonts/**'],
                        dest: 'fonts/'
                    },

                    // Stylesheets
                    {
                        expand: true,
                        cwd: 'bower_components/bootstrap-sass/assets/stylesheets/',
                        src: ['**/*.scss'],
                        dest: 'scss/'
                    }
                ]
            },
        },

        // Compile SASS files into minified CSS.
        sass: {
            options: {
                includePaths: ['bower_components/bootstrap-sass/assets/stylesheets']
            },
            dist: {
                options: {
                    outputStyle: 'compressed'
                },
                files: {
                    'css/app.css': 'scss/app.scss'
                }
            }
        },

        // Watch these files and notify of changes.
        watch: {
            grunt: { files: ['Gruntfile.js'] },

            sass: {
                files: [
                    'scss/**/*.scss'
                ],
                tasks: ['sass']
            }
        }
    });

    // Load externally defined tasks.
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-copy');

    // Establish tasks we can run from the terminal.
    grunt.registerTask('build', ['sass', 'copy']);
    grunt.registerTask('default', ['build', 'watch']);

}

Finally, add a folder named scss to the root of your project. Inside it, add a file named app.scss with the statement below that imports the Bootstrap framework. This is also the file where you should import your own, custom SASS components.

@import "\_bootstrap.scss";

All that’s left to do is run Grunt. In the terminal, execute the following command from the root of the project:

grunt

Optimization Grunt Bower Twitter Bootstrap