grunt-booty
Adds the bootstrap to your project from a bower install - (optionally includes font-awesome)
Getting Started
This plugin requires Grunt ~0.4.1
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-booty --save-dev
One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt;
The "booty" task
Overview
In your project's Gruntfile, add a section named booty
to the data object passed into grunt.initConfig()
, it's a
multitask so you'll need to add a task identier (e.g. dev
):
grunt
Options
options.componentPath
The location of the bower installs
options.dest
The stylesheet destination for all of the bootstrap and font-awesome goodness
Usage Examples
The plugin is designed to be able to be integrated easily into a number of projects although the initial use case is to include bootstrap and font-awesome-more into a yeoman angular scaffold ( using yeoman 1.0 ). These are the steps to do that:
-
Make sure yeoman, bower, grunt and the angular generator are installed ( more info )
npm install -g yo grunt-cli bowernpm install -g generator-angular generator-karma -
Create a new directory and scaffold the project with yeoman. Yeoman will ask for a number of setup options, just hit
n
for everything ( you can add the additional angular stuff if you need but no need for the Compass version of bootstrap )mkdir bootilicious && cd $_yo angular -
Install the components we want from bower and install the grunt tasks we need to work with them
bower install bootstrap font-awesome-more --savenpm install grunt-booty grunt-contrib-less --save-dev -
Everything will be installed and ready to go but there is a quick bit of scaffolding before we can set up the tasks to run - go ahead and create a
css
and aless
folder instyles
, we can also delete the pre-generatedmain.css
as we’ll be using a slightly different structure ( grunt-booty will very soon take care of this step for you )mkdir -p app/styles/{css,less}rm app/styles/main.css -
Create
main.less
inapp/styles/less
and add these lines to import bootstrap and font-awesome-more ( if you want the extras in font-awesome-more then import them here ):vi app/styles/less/main.less'./../bootstrap/bootstrap';'./../bootstrap/responsive';'./../font-awesome-more/font-awesome'; -
While we’re house keeping we should also update the link to the
main.css
file that will be created when the task is run. Replace line 14 inindex.html
with this ( adds the css folder to the path for the css ): -
Now it’s time to set up the tasks. Add these tasks to your
Gruntfile.initConfig
object:booty:dev:options:componentPath: '<%= yeoman.app %>/components/'dest: '<%= yeoman.app %>/styles/'less:dev:options:paths: '<%= yeoman.app %>/styles/less/'files:'<%= yeoman.app %>/styles/css/main.css': '<%= yeoman.app %>/styles/less/main.less'( Booty is a one-time assembly task—unless you’re reassembling bootstrap and font-awesome-more after an update—but you'll probably want to compile your less more than once so you'll probably want to add the less task to the server task that is scaffolded from yeoman and additionally add your less to the watch task )
-
Everything should be ready to rock so hit up your tasks
grunt bootygrunt less -
Now fire up the server to see the yeoman generated index page, complete with bootstrappy goodness
grunt server -
To test that font-awesome-more has been also been included in your project go ahead and open up a new bash tab to keep the watch task running and replace line 2 in
app/views/main.html
with this:vi app/views/main.html'Allo, 'Allo! -
Now get to work creating awesome things
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
22.04.2013 v0.2.1 Corrections to vanilla test case - Detailed usage example using yeoman angular generator
20.04.2013 v0.2.0 Task ready to roll with test case - Initial deploy to npm
Task submitted by Matt Styles @veryfizzyjelly