How To

Updating Bower with Grunt

Automation is king. So is content of course, but automating the code behind the content will save you time, money, and headaches.

The goal of automation is to make the annoying stuff I don’t want to have to remember to do easier to do. Bower is useful for updating things. Grunt is useful for running a series of commands. Using them together makes life easier.

In my little world, everything lives in a folder called ‘assets’ and its very simple.

Add a Package to Bower and call it in Grunt Add a Package to Bower and call it in Grunt

First I have a .bowerrc file which very simply says this:

   "directory": "vendor"

That tells Bower where to install things. So when I run bower install jquery-backstretch --save in my asset folder, it saves backstretch to the vendor folder.

In my gruntfile.js, I have this to pull in my backstretch arguments and the main file into one file, uncompressed, a folder level up:

		concat: {
			// Combine all the JS into one
		    backstretch: {
		    		src: ['js/backstretch.args.js', 'vendor/jquery-backstretch/jquery.backstretch.min.js'],
				dest: '../js/backstretch.js',

Just like magic.

Top ↑

Tell Grunt to Update Bower Tell Grunt to Update Bower

But while Bower pulled in the packages, I don’t want to have to tell Bower ‘Hey, make sure everything’s up to date!’ every few days. I want to make sure I’m on the latest version of a branch most of the time, for security reasons at the very least. That means I have this in my bower.json file:

  "dependencies": {
    "bourbon": "~4.2.3",
    "neat": "~1.7.2",
    "jquery-backstretch": "~2.0.4"

So if I run bower update I would get this:

bower jquery-backstretch#~2.0.4 cached git://
bower jquery-backstretch#~2.0.4         validate 2.0.4 against git://
bower bourbon#~4.2.3                      cached git://
bower bourbon#~4.2.3                    validate 4.2.3 against git://
bower neat#~1.7.2                         cached git://
bower neat#~1.7.2                       validate 1.7.2 against git://
bower jquery#~1.9.1                       cached git://
bower jquery#~1.9.1                     validate 1.9.1 against git://
bower neat#~1.7.2                        install neat#1.7.2
bower bourbon#~4.2.3                     install bourbon#4.2.3

neat#1.7.2 vendor/neat
└── bourbon#4.2.3

Cool. But who wants to run that every day?

Instead, I ran npm install grunt-bower-update --save-dev to install a new Grunt tool, Bower Update. With that code added to my gruntfile.js, every time I run my grunt update command, it first updates my libraries and then runs the processes.

There is a downside to this. I use git to keep track of my work and either track the vendor packages in my repo (which can make it a little large) or I can remember to install the packages. There are other ways around this, like using grunt-bower-task to set up things to install if not found, update if they are found. I went with including them in my repos, which makes the git pull a bit large (it added about 6000 files), but since I properly delete my assets folder when I deploy from git, it won’t impact the size of my server’s package.

Top ↑

Register a New Bower Package Register a New Bower Package

Randomly, when I initially tried to install backstretch, I forgot it was named ‘jquery-backstretch’ and did this:

$ bower install backstretch --save
bower                        ENOTFOUND Package backstretch not found

Obviously the right fix is to use the right repo name (and bower has a great search tool to help me to that). But what if I did want to package it up as backstrech? Or if I wanted to add my own repo? Well I would have to register that package first. And that’s pretty easy:

bower register backstretch git://

Top ↑

Your Tricks? Your Tricks?

Do you have Bower tricks?