Twitter Bower & Grunt: Get started with assets management

You may have found yourself downloading latest version of your favourites JS or LESS packages every time you created a new website or app project, or even worse copy and pasted assets from an old website. In this article, I will demonstrate how you can automate package management with Twitter Bower and build your assets with Grunt, and eventually work smarter.

Installing Bower

Bower is written in Node.js and therefore require Node package manager npm to install it. So first you will need to install Node.js, by choosing an installer on the Node.js download page.

Once Node.js is installed, simply run the following command:

$ sudo npm install -r bower

Finding packages

There's two ways of looking for packages:

Either search for packages using the command line tool:

$ bower search bootstrap

Or alternatively, browse them from the online repository

Installing packages

Once you have found your favourite packages, run the following command within your project folder:

$ bower install bootstrap

It may take a minute or so...

Please note that Bower will cache your downloaded packages in ~/.bower/cache so next time you run the install, it will use the cache version for a quicker install.

Though, if the packages have been updated and you want to download the latest, you can clear the cache:

$ bower cache-clean

Or if you wish to update your packages:

$ bower update bootstrap

Building your assets

Grunt is wonderful tool build in Node.js which basically allows you to write a set of functions that will process your assets as required. You can for example command to jshint (check JS syntax), concat (Concatenated multiple files in one) and uglify (minify files) a bundle of JS files as required.

The list of plugins is long so check the Grunt plugin page to see what it can do. For the purpose of this article, I will demonstrate how to use Grunt for scaffolding the assets installed by Bower, and building a deployment methodology to manage our assets.

First we need to install Grunt, in a similar fashion as we did for Bower, using NPM:

$ sudo npm install -g grunt-cli

Then, we need to create a package.json file to indicate which Grunt dependencies we need to install:

{
  "name": "deploy",
  "version": "0.0.1",
  "devDependencies": {
  "grunt": "latest",
  "grunt-contrib-uglify": "latest",
  "grunt-contrib-jshint": "latest",
  "grunt-contrib-watch": "latest",
  "grunt-contrib-concat": "latest",
  "grunt-contrib-copy": "latest",
  "grunt-contrib-cssmin": "latest",
  "grunt-contrib-less": "latest",
  "grunt-contrib-coffee": "~0.10.1"
  }
}

And install:

$ sudo npm install

Then, we must create a gruntfile.js to config which action we would like Grunt to execute:

In this config, we specify which files to copy files from downloaded packages (copy), check for syntax (jshint), which file to concatenate (concat), which file to uglify (uglify) and finally which file to watch (watch).

To execute this command:

$ grunt

By default, grunt will run the 'default' tasks. So it is also possible to run a specific task for example:

$ grunt build

The build command will pull the assets from the packages downloaded by Bower and set up a default starting architecture for the new project. So technically, it should only be run once.

Watch file changes

You can also watch you files, so if you change any of those files, then grunt will automatically re-run the config, which great to test development work.

$ grunt watch

So if you use something like CodeKit, then you won't need it anymore!

Further reading

You can read the NPM Bower package instructions for an overview of all the commands or simply look on the Twitter Bower home page.

For Grunt, you can refer to their online documentation.

< / >